SegmentedControl

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

When using only icons in SegmentedControlButton, set aria-label for the SegmentedControlButton.

<Wrap gap="md">
  <SegmentedControl>
    <SegmentedControlButton aria-label="plus" value="plus">
      <PlusIcon />
    </SegmentedControlButton>
    <SegmentedControlButton aria-label="minus" value="minus">
      <MinusIcon />
    </SegmentedControlButton>
  </SegmentedControl>
</Wrap>

Copied!

Key	Description	State
`Tab`	Focuses the selected item.	-
`ArrowLeft`	Focuses the previous item that is not disabled. If it's the first item, it focuses the last item that is not disabled.	-
`ArrowRight`	Focuses the next item that is not disabled. If it's the last item, it focuses the first item that is not disabled.	-

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`SegmentedControl`	`role="radiogroup"`	Indicates that this is a radio group.
`SegmentedControlButton`	`role="radio"`	Indicates that this is a radio.
	`aria-disabled="true"`	Sets `"true"` if `isDisabled` is set to `"true"`.

Edit this page on GitHub

PreviousRating NextData Display