Toggle #

Toggle switch, used for selection between two values.

Import #

Examples #

Basic #

Sizes #

Colors #

With label #

Text and icon #

You can set the content displayed in the two states of the switch through the checkedChildren and unCheckedChildren properties.

Disabled and read only #

Loading #

Accessibility #

ARIA Properties #

• Toggle has role switch.
• Has aria-checked set to true when it is checked.
• Has aria-checked set to false when it is unchecked.
• Has aria-busy set to true when it is loading.
• Has aria-disabled set to true when it is disabled.
• Has aria-labelledby set to the id of children when it has children.

Keyboard Interactions #

• Space - Toggle the switch state.

Props #

<Toggle> #

Property	Type (Default)	Description
checked	boolean	Whether the toggle is checked (Controlled)
checkedChildren	ReactNode	Checked display content
children	ReactNode	The label of the toggle switch
classPrefix	string ('toggle')	The prefix of the component CSS class
color	Color	Color of the toggle switch
defaultChecked	boolean	Default checked state
disabled	boolean	Whether the switch is disabled
loading	boolean	Whether the switch is in loading state
locale	ToggleLocaleType	Custom locale text
onChange	(checked: boolean, event) => void	Callback function when state changes
size	'lg' | 'md' | 'sm'	Toggle size
unCheckedChildren	ReactNode	Unchecked display content

ts:Color #

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';