2020-07-15 21:30:37 +00:00
|
|
|
# Switch
|
|
|
|
|
|
|
|
|
|
[component-header:sl-switch]
|
|
|
|
|
|
|
|
|
|
Switches allow the user to toggle an option on or off.
|
|
|
|
|
|
|
|
|
|
```html preview
|
2020-08-24 14:02:45 +00:00
|
|
|
<sl-switch>Switch</sl-switch>
|
2020-07-15 21:30:37 +00:00
|
|
|
```
|
|
|
|
|
|
2021-05-13 13:11:24 +00:00
|
|
|
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
|
## Examples
|
|
|
|
|
|
|
|
|
|
### Checked
|
|
|
|
|
|
|
|
|
|
Use the `checked` attribute to activate the switch.
|
|
|
|
|
|
|
|
|
|
```html preview
|
|
|
|
|
<sl-switch checked>Checked</sl-switch>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Disabled
|
|
|
|
|
|
|
|
|
|
Use the `disabled` attribute to disable the switch.
|
|
|
|
|
|
|
|
|
|
```html preview
|
|
|
|
|
<sl-switch disabled>Disabled</sl-switch>
|
|
|
|
|
```
|
|
|
|
|
|
2020-08-20 13:09:23 +00:00
|
|
|
### Custom Size
|
|
|
|
|
|
|
|
|
|
Use the available custom properties to make the switch a different size.
|
|
|
|
|
|
|
|
|
|
```html preview
|
2020-12-22 14:40:11 +00:00
|
|
|
<sl-switch style="--width: 80px; --height: 32px; --thumb-size: 26px;"></sl-switch>
|
2020-08-20 13:09:23 +00:00
|
|
|
```
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
|
[component-metadata:sl-switch]
|
