Radio
Radio
is a component used for allowing users to select one option from multiple choices.
The Radio
follows theWAI-ARIA - Radio Pattern for accessibility.
If not using FormControl, set aria-labelledby on the RadioGroup.
<VStack gap="sm"><Text as="h3" id="group">キャラクター</Text><RadioGroup aria-labelledby="group"><Radio value="孫悟空">孫悟空</Radio><Radio value="ベジータ">ベジータ</Radio><Radio value="フリーザ">フリーザ</Radio></RadioGroup></VStack>
Keyboard Navigation
Key | Description | State |
---|---|---|
Tab | Moves focus to the checked radio button within the radio group. If no radio button is checked, moves focus to the first radio button. | - |
Space | Checks the focused radio button. | - |
ArrowLeft | Checks the previous enabled radio button. | - |
ArrowRight | Checks the next enabled radio button. | - |
ArrowUp | Checks the previous enabled radio button. | - |
ArrowDown | Checks the next enabled radio button. | - |
ARIA Roles and Attributes
Component | Roles and Attributes | Usage |
---|---|---|
RadioGroup | role="radiogroup" | Indicates that this is a radio group. |
aria-labelledby | If RadioGroup is within a FormControl and FormControl has a label or Label, set its id. | |
Radio | aria-checked | Sets to "true" if the radio button is checked, and "false" if it is not checked. |
Edit this page on GitHub