Switch

A switch is a control that toggles the state of a setting between on and off.

Examples

To keep inline with accessibility guidelines, the label for a switch must never dynamically change. A dynamically changing label (such as one label for an "on" state and another label for an "off" state) can be confusing as the contexts for each label changes as the switch state does. This applies to both visible text labels as well as labels provided via aria-label.

Basic

Reversed Layout

Without label

Checked with label

Disabled




Uncontrolled


Props

Switch

*required
NameTypeDefaultDescription
aria-labelstringundefinedAdds an accessible name to the switch when the label prop is not passed, and must describe the isChecked="true" state.
aria-labelledbystringundefinedAdds an accessible name to the switch via one or more referenced id(s). The computed accessible name must describe the isChecked="true" state.
classNamestringAdditional classes added to the switch
defaultCheckedbooleanFlag to set the default checked value of the switch when it is uncontrolled by React state. To make the switch controlled instead use the isChecked prop, but do not use both.
hasCheckIconbooleanFlag to show if the switch has a check icon.
idstringid for the label.
isCheckedbooleantrueFlag to show if the switch is checked when it is controlled by React state. To make the switch uncontrolled instead use the defaultChecked prop, but do not use both.
isDisabledbooleanfalseFlag to show if the switch is disabled.
isReversedbooleanfalseFlag to reverse the layout of toggle and label (label at start, toggle at end).
labelReact.ReactNodeText value for the visible label
onChange(event: React.FormEvent<HTMLInputElement>, checked: boolean) => void() => undefined as anyA callback for when the switch selection changes. (event, isChecked) => {}
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

CSS variables

Expand or collapse columnSelectorVariableValue