Toggle Switch

Toggle Switch allows users to toggle a boolean selection between states instantly. There is always a default selection for switches.

On this page

Import

Toggle Switch

Loading preview
Open in Storybook

List of Toggle Switches

Loading preview
Open in Storybook

Props

ToggleSwitch Props

NameDescriptionDefault
label

Text that's used as the visual and accessible label for the component. If not provided, hide the component's built-in label. Label text associated with the switch for accessibility

string		-
aria-labelledby

The id of a label, which provides an accessible name for the component Identifies the element (or elements) that labels the current element. @see aria-describedby.

string		-
id*

Unique identifier for the ToggleSwitch component

string		-
checked

Whether the switch is checked (true) or unchecked (false)

boolean		-
iconOn

Icon displayed when the switch is in the "on" position

ReactNode		-
iconOff

Icon displayed when the switch is in the "off" position

ReactNode		-
onText

Text displayed when the switch is in the "on" position

string		-
offText

Text displayed when the switch is in the "off" position

string		-
hideToggleStatus

Whether to hide the toggle status.

boolean		-
hideToggleIcon

Whether to hide the toggle icon.

boolean		-
hint

Hint text associated with the switch for accessibility

string		-
isHintVisuallyHidden

If true, visually hides the hint text (it will still be accessible to screen readers)

boolean		-
showDivider

Whether the switch is part of a list or not

boolean		-
onClick

Callback function to be called when the Toggle Switch is clicked

((event: MouseEvent<HTMLButtonElement, MouseEvent>, checked: boolean) => void)		-
reactlytics
ReactlyticsProp		-
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean		-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish		-
ref
((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null		-

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.