Toggle

Used to select between two values.

Import 

import { Toggle } from 'rsuite';

// or
import Toggle from 'rsuite/Toggle';

Examples

Basic

Size

The size property sets the switch size, and the value includes: lg、md、sm.

Text and icon

Can be set by the checkedchildren, uncheckedchildren two properties, respectively, the display of the toggle state.

Disabled and read only

Loading

Accessibility

  • Toggle has role switch.
  • When "on" state, Toggle has aria-checked set to true.
  • When "off" state, Toggle has aria-checked set to false.
  • All form controls should have labels, which can be implemented in the form through Form.ControlLabel. If you need to use it independently, you need to directly add attributes (arial-label, aria-labelledby).
<Toggle arial-label="Switch" />

Props

<Toggle>

Property Type (Default) Description
checked boolean Checked（Controlled）
checkedChildren ReactNode Checked display content
classPrefix string 'toggle' The prefix of the component CSS class
defaultChecked boolean Default checked
disabled boolean Disabled
loading boolean Whether to show a spinner indicating checked state is being fetched/updated
locale ToggleLocaleType Locale text
onChange (checked: boolean, event) => void Callback function when state changes
size 'lg' | 'md' | 'sm' Toggle size
unCheckedChildren ReactNode Unselected display content
Vercel banner