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.
You can override the
colorScheme of the Radio to any color key specified in
The checkbox comes with 3 sizes.
In some cases, you might need to create components that work like radios but
don't look like radios. Chakra exports
useRadioGroup hooks to
help with this scenario. Here's what you need to do:
useRadioGrouphook to control a group of custom radios.
We recommend passing the
name prop to the
RadioGroup component, instead of
passing it to each
Radio component. By default, the
name prop of the
RadioGroup takes precedence.
|css||The emotion's css style object||-|
|defaultIsChecked||If `true`, the radio will be initially checked.||-|
|id||id assigned to input||-|
|isChecked||If `true`, the radio will be checked. You'll need to pass `onChange` to update its value (since it is now controlled)||-|
|isDisabled||If `true`, the radio will be disabled||-|
|isFocusable||If `true` and `isDisabled` is true, the radio will remain focusable but not interactive.||-|
|isFullWidth||If `true`, the radio will occupy the full width of its parent container||-|
|isInvalid||If `true`, the radio button will be invalid. This sets `aria-invalid` to `true`.||-|
|isReadOnly||If `true`, the radio will be read-only||-|
|isRequired||If `true`, the radio button will be invalid. This sets `aria-invalid` to `true`.||-|
|name||The name of the input field in a radio (Useful for form submission).||-|
|onChange||Function called when checked state of the `input` changes||-|
|spacing||The spacing between the checkbox and its label text|
|value||The value to be used in the radio button. This is the value that will be returned on form submission.||-|