ant-design/components/switch/index.en-US.md

category, group, title, description, cover, coverDark, demo

category	group	title	description	cover	coverDark	demo
Components	Data Entry	Switch	Used to toggle between two states.	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rtArRpBNDZcAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*al07RK8SGf4AAAAAAAAAAAAADrJ8AQ/original	cols 2

When To Use

• If you need to represent the switching between two states or on-off state.
• The difference between Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.

Examples

Basic Disabled Text & icon Two sizes Loading Custom component token Custom semantic dom styling

API

Common props ref：Common props

Property	Description	Type	Default	Version
checked	Determine whether the Switch is checked	boolean	false
checkedChildren	The content to be shown when the state is checked	ReactNode	-
className	The additional class to Switch	string	-
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>	-
defaultChecked	Whether to set the initial state	boolean	false
defaultValue	Alias for defaultChecked	boolean	-	5.12.0
disabled	Disable switch	boolean	false
loading	Loading state of switch	boolean	false
size	The size of the Switch, options: default small	string	default
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>	-
unCheckedChildren	The content to be shown when the state is unchecked	ReactNode	-
value	Alias for checked	boolean	-	5.12.0
onChange	Trigger when the checked state is changing	function(checked: boolean, event: Event)	-
onClick	Trigger when clicked	function(checked: boolean, event: Event)	-

Methods

Name	Description
blur()	Remove focus
focus()	Get focus

Semantic DOM

Design Token

FAQ

Why not work in Form.Item?

Form.Item default bind value to value property, but Switch value property is checked. You can use valuePropName to change bind property.

<Form.Item name="fieldA" valuePropName="checked">
  <Switch />
</Form.Item>