Toggle

Toggle switch, used for selection between two values.

Import

MainIndividual
import { Toggle } from 'rsuite';

Examples

Basic

Sizes

Colors

With label

Inner labels

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 Version
checked boolean Whether the toggle is checked (Controlled)
checkedChildren ReactNode Checked display content
classPrefix string ('toggle') The prefix of the component CSS class
color Color Color of the toggle switch Version 5.64.0 or above
defaultChecked boolean Default checked state
disabled boolean Whether the switch is disabled
label ReactNode The label of the toggle switch Version 6.0.0 or above
labelPlacement 'start' | 'end' ('end') The placement of the label Version 6.0.0 or above
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 Size Toggle size
unCheckedChildren ReactNode Unchecked display content

Color 

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

Size 

type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';