Toggle

Toggle switch, used for selection between two values.

Import

MainIndividual
import { Toggle } from 'rsuite';

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

Color 

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