The Toggle component is built using a native HTML <input type="checkbox"> element. The input is visually hidden but remains in the accessibility tree, while a custom-styled <div> provides the visual track and thumb. Its <label> element points to the input's id so clicking the label allows toggling the control.

Assistive text (description and error) renders in separate elements below the input. Their IDs are automatically linked to the input through the aria-describedby attribute so that assistive technology will properly announce them.

ARIA

table
Element	Attribute	Description
Input	`aria-describedby`	References the description and error text elements. When both are present, both IDs are included. Custom text may be set.
Input	`aria-label`	Provides an accessible name when no visible label is rendered.
Input	`aria-labelledby`	References the visible label element's ID. When a custom `ariaLabelledby` prop is also provided, both IDs are included so the input is named by all referenced elements.
Track	`aria-hidden="true"`	Hides the decorative track and thumb from assistive technology.

Labels

We highly recommend adding visible labels with the label prop to prevent a lapse in communication. If a visible label is unneeded for the use case, add an ariaLabel or ariaLabelledby so assistive technology will announce the Toggle to the user. Omitting a label will result in an error.

Keyboard

table
Key	Function
`Space`	Toggles the input between checked and unchecked.
`Shift`+`Tab`	Moves focus to the previous focusable element.
`Tab`	Moves focus to the next focusable element.

Toggle

Structure

ARIA

Labels

Keyboard

On this page