Switch

Used to toggle between two states.

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.

The most basic usage.

With text and icon.

Mark a pending state of switch.

Disabled state of Switch.

size="small" represents a small sized switch.

You can customize the semantic dom style of Switch by passing objects/functions through classNames and styles.

Switch and its props are exported from @ceebee/ui/client.

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`	`-`	—
`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: medium small	`'medium' \| 'small'`	`medium`	—
`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)`	`-`	—
`blur()`	Remove focus	`—`	`—`	—
`focus()`	Get focus	`—`	`—`	—