mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity
993b9eb4e7
ant-design/components/switch/index.en-US.md
黑雨 cef58664e8
📝doc: add design token table (#41717) 
* ✨feat: add token

* 📝doc: update lint

* 📝doc: update doc
2023-04-11 10:25:24 +08:00

2.0 KiB
Raw Blame History

category group title cover coverDark demo
Components Data Entry Switch https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rtArRpBNDZcAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*al07RK8SGf4AAAAAAAAAAAAADrJ8AQ/original
cols
2

Switching Selector.

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

API

Property Description Type Default
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
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 -
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