RadioCard

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

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

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

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

return <RadioCardGroup items={items} aria-label="キャラクター" />

Copied!

const items = useMemo<RadioCardItem[]>(
  () => [
    { label: "ビアンカ", value: "ビアンカ" },
    { label: "フローラ", value: "フローラ" },
    { label: "ルドマン", value: "ルドマン" },
  ],
  [],
)

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

    <RadioCardGroup items={items} aria-labelledby="label" />
  </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
`RadioCardGroup`	`role="radiogroup"`	Indicates that this is a radio group.
	`aria-labelledby`	If RadioCardGroup is within a FormControl and FormControl has a label or Label, set its id.
`RadioCard`	`aria-checked`	Sets to "true" if the radio button is checked, and "false" if it is not checked.

Edit this page on GitHub

PreviousRadio NextCheckbox