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. The Search.io React SDK 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.