Radios are used when only one choice may be selected in a series of options.
Native HTML radios are 100% accessible by default, so we used a very common CSS technique to style the radio.
The Radio component composes
ControlBox, a component we created to make it
easy to style sibling inputs. Check it out
Radio with custom color#
You can override the color scheme of the Radio to any color key specified in
The checkbox comes with 3 sizes
Custom Radio Buttons#
In some cases, you might need to create components that work like radios but
don't look like radios. Chakra exports a
RadioButtonGroup to help with this
scenario. Here's what you need to do:
- Create a component that accepts the
isDisabledprops. Be sure to
forwardRefto the component because it's used for keyboard accessibility.
- Add the component as children of
RadioButtonGroupand pass a
valueprop to it.
- If you pass
isDisabledto any of it's children, it'll be skipped in the keyboard navigation.
|id||The id assigned to input field|
|name||The name of the input field in a radio (Useful for form submission)|
|value||The value to be used in the radio input. This is the value that will be returned on form submission|
|variantColor||The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red")|
|size||The size (width and height) of the radio|
|children||The children of the radio|
|onChange||Function called when the state of the radio changes|
|onBlur||Function called when you blur out of the radio|
|onFocus||Function called when the radio receive focus|
|aria-label||An accessible label for the radio in event there's no visible label or |
|aria-labelledby||Id that points to the label for the radio in event no |
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2020 Segun Adebayo