Toggle

Toggle is a component that has two states: on or off.

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

<Toggle icon={<Bold />} aria-label="Toggle bold" />

Copied!

Setting aria-label on ToggleGroup will make it readable by screen readers.This allows you to convey the overall purpose or function of the group to screen reader users.

const [value, setValue] = useState<string | undefined>(undefined)

return (
  <ToggleGroup
    value={value}
    onChange={setValue}
    aria-label="Text formatting options"
  >
    <Toggle value="bold" icon={<Bold />} aria-label="Toggle bold" />
    <Toggle value="italic" icon={<Italic />} aria-label="Toggle italic" />
    <Toggle
      value="underline"
      icon={<Underline />}
      aria-label="Toggle underline"
    />
  </ToggleGroup>
)

Copied!

Keyboard Interaction

Key	Description	State
`Tab`	Focuses the element.	-
`Space`, `Enter`	Toggles the focused element.	-

ARIA Roles and Attributes

Component	Role and Attributes	Usage
`ToggleGroup`	`role="group"`	Indicates that it's a group.
`Toggle`	`aria-pressed`	Set to `true` if the element is pressed, or `false` if it is not pressed.

Edit this page on GitHub

PreviousSwitch NextSelect