# Switch

[component-header:sl-switch]

Switches allow the user to toggle an option on or off. 

```html preview
<sl-switch>Switch</sl-switch>
```

?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.

## 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>
```

### Custom Size

Use the available custom properties to make the switch a different size.

```html preview
<sl-switch style="--width: 80px; --height: 32px; --thumb-size: 26px;"></sl-switch>
```

[component-metadata:sl-switch]