Switch - Ant Design

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

API

Common props ref：Common props

Property	Description	Type	Default	Version
autoFocus	Whether get focus when component mounted	boolean	false
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	-
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`
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

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
handleBg	Background color of Switch handle	string	#fff
handleShadow	Shadow of Switch handle	string	0 2px 4px 0 rgba(0,35,11,0.2)
handleSize	Size of Switch handle	number	18
handleSizeSM	Size of small Switch handle	number	12
innerMaxMargin	Maximum margin of content area	number	24
innerMaxMarginSM	Maximum margin of content area of small Switch	number	18
innerMinMargin	Minimum margin of content area	number	9
innerMinMarginSM	Minimum margin of content area of small Switch	number	6
trackHeight	Height of Switch	string \| number	22
trackHeightSM	Height of small Switch	string \| number	16
trackMinWidth	Minimum width of Switch	string \| number	44
trackMinWidthSM	Minimum width of small Switch	string \| number	28
trackPadding	Padding of Switch	number	2

Global TokenHow to use?

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.

tsx

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