Radio buttons allow users to choose a single option from a list where all choices are always visible.
Example
⌘ Cmd + ⌥ Option + 1
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| testSection | string | - | null | Hook for automated JavaScript tests |
| labelWeight | oneOf 'light' | 'normal' | 'bold' | - | 'normal' | Font weight for the label text |
| checked | bool | - | - | Boolean to set radio input, for controlled component |
| defaultChecked | bool | - | - | Boolean for how radio input renders initially |
| isDisabled | bool | - | - | Prevents radio input from being modified and appears disabled |
| label | string | node | - | - | Text that describes the radio input |
| name | string | yes | - | String that can be used to identify a set of radio inputs so that only one in the set is checked at any given time. |
| onChange | func | - | - | Function that fires when the radio input is clicked |
Usage
Lorem ipsum
Best Practices
Do
Use radio buttons to present all choices without hiding options behind a click (like Select or Dropdown) as this can aid more long-form reading and scanability of the page
Don't
Avoid presenting too many options; consider Select or Dropdown in these cases