Radio

Radio is a component used for allowing users to select one option from multiple choices.

The Radio follows the WAI-ARIA - Radio Pattern for accessibility.

If you are not using Fieldset, set aria-label or aria-labelledby to RadioGroup.

<RadioGroup aria-label="キャラクター">
  <Radio value="孫悟空">孫悟空</Radio>
  <Radio value="ベジータ">ベジータ</Radio>
  <Radio value="フリーザ">フリーザ</Radio>
</RadioGroup>

Copied!

<VStack gap="sm">
  <Text as="h3" id="label">
    キャラクター
  </Text>

  <RadioGroup aria-labelledby="label">
    <Radio value="孫悟空">孫悟空</Radio>
    <Radio value="ベジータ">ベジータ</Radio>
    <Radio value="フリーザ">フリーザ</Radio>
  </RadioGroup>
</VStack>

Copied!

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

PreviousTextarea NextRadioCard