Input · Switch
Switch
Switch is an interactive form used to switch two mutually exclusive states.

Demos

How to import

Basic Usage

You can monitor state changes through onChange, and set the selected state through defaultChecked or controlled checked.
Use aria-label to describe the specific function of the Switch

Size

Disabled

With text

Can pass checkedText with uncheckedText Text when setting the switch
The long text is recommended to be placed directly on the outside.
Note: This does not work with the smallest switch (size = 'small')
Compared to setting the embedded text through checkedText and uncheckedText, we recommend placing the text description outside the Switch

Controlled component

Whether the component is selected depends entirely on the incoming checked value, used with onChange

loading

version: >= 1.29.0
You can turn on the loading state by setting loading="true".

API reference

PropertiesInstructionsTypeDefaultversion
aria-labelaria-label used to define a string that labels the current element. Use it in cases where a text label is not visible on the screenstring2.2.0
aria-labelledbyaria-labelledbyattribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.string2.2.0
classNameThe CSS class name of the wrapper elementstring
checkedIndicates whether currently selected, used with onchangebooleanfalse
checkedTextContent displayed when open, invalid when size is smallReact Node0.25.0
defaultCheckedWhether selected when component mountedbooleanfalse
disabledIf true, the switch will be disabled.booleanfalse
loadingTurn on loading statusbooleanfalse1.29.0
onChangeCallback function when changingfunction (checked: boolean)
onMouseEnterA callback when the mouse moves infunction ()
onMouseLeaveA callback when the mouse moves outfunction ()
sizeSize, optional value large, default, smallstring'default'
styleInline styleobject{}
uncheckedTextContent displayed when closed, invalid when size is smallReact Node0.25.0

Accessibility

ARIA

  • Switch has a switch role, when checked is true, aria-checked will be automatically set to true, and vice versa.
  • As a form field, it should have a Label, which will be automatically brought on when you use Form.Switch.
  • If you use Switch alone, it is recommended to use aria-label to describe the current label function.

Keyboard and Focus

  • Keyboard users can use Tab and Shift + Tab to switch focus.
  • When focusing, you can switch on or off by pressing the Space key.

Content Guidelines

  • Switch description
    • First letter is capitalized, no punctuation is required
    • Indirectly and explicitly state whether the setting is on or off
    • If needed, explain to the user what the on and off states represent

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED