Radio
The Radio
component is used when only one choice may be selected in a series of options.
Usage
Basic usage of radio button.
Editable Example
example-1
Disabled
Editable Example
example-2
Horizontal alignment
Editable Example
Invalid
Editable Example
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 RadioGroup
to help with this
scenario. Here's what you need to do:
- Create a component that accepts the
checked
anddisabled
props. Be sure toforwardRef
to the component because it's used for keyboard accessibility. - Add the component as children of
RadioGroup
and pass avalue
prop to it. - If you pass
disabled
to any of it's children, it'll be skipped in the keyboard navigation.
Editable Example
Props
Radio Props
Name | Type | Default | Description |
---|---|---|---|
name | string | The name of the input field in a radio (Useful for form submission). | |
value | string or number | The value to be used in the radio input. This is the value that will be returned on form submission. | |
checked | boolean | If true , the radio will be checked. You'll need to pass onChange to update it's value (since it's now controlled). | |
defaultChecked | boolean | If true , the radio will be initially checked. | |
disabled | boolean | If true , the radio will be disabled. | |
invalid | boolean | If true , the radio is marked as invalid. Changes style of unchecked state. | |
children | React.ReactNode | The children of the radio. | |
onChange | function | Function called when the state of the radio changes. | |
onBlur | function | Function called when you blur out of the radio. | |
onFocus | function | Function called when the radio receive focus. | |
aria-label | string | An accessible label for the radio in event there's no visible label or children was passed. | |
aria-labelledby | string | Id that points to the label for the radio in event no children was passed. | |
fontSize | 'xs' | 'sm' | 'md' | 'lg' | Specify the label's font size. |
RadioGroup & RadioGroup Props
Name | Type | Default | Description |
---|---|---|---|
id | string | The id of the checkbox group. | |
name | string | The name of the input field in a radio (Useful for form submission). | |
defaultValue | string | The initial value of the radio group. | |
value | RadioProps['value'] | The value of the radio group. | |
onChange | function | The callback fired when any children Radio is checked. | |
spacing | FlexProps['space'] | The space between each checkbox. | |
inline | boolean | If true , the checkboxes will aligned horizontally. |
RadioGroup
composes the ButtonGroup
component.