Switch - Semi Design

Demos

How to import


import { Switch } from '@douyinfe/semi-ui';

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

Properties	Instructions	Type	Default	version
aria-label	aria-label used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen	string		2.2.0
aria-labelledby	aria-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.	string		2.2.0
className	The CSS class name of the wrapper element	string
checked	Indicates whether currently selected, used with onchange	boolean	false
checkedText	Content displayed when open, invalid when size is small	React Node		0.25.0
defaultChecked	Whether selected when component mounted	boolean	false
disabled	If true, the switch will be disabled.	boolean	false
loading	Turn on loading status	boolean	false	1.29.0
onChange	Callback function when changing	function (checked: boolean)
onMouseEnter	A callback when the mouse moves in	function ()
onMouseLeave	A callback when the mouse moves out	function ()
size	Size, optional value `large`, `default`, `small`	string	'default'
style	Inline style	object	{}
uncheckedText	Content displayed when closed, invalid when size is small	React Node		0.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