You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
1.6 KiB
79 lines
1.6 KiB
6 months ago
|
# Switch
|
||
|
|
|
||
|
|
A toggle control that switches between on and off states.
|
||
|
|
|
||
|
|
## Anatomy
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<Switch.Provider bind:checked>
|
||
|
|
<Switch.Thumb />
|
||
|
|
</Switch.Provider>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Parts
|
||
|
|
|
||
|
|
| Part | Element | Description |
|
||
|
|
|------|---------|-------------|
|
||
|
|
| `Provider` | `<button>` | Switch control. Toggles on click. |
|
||
|
|
| `Thumb` | `<div>` | Visual indicator that slides between states. |
|
||
|
|
|
||
|
|
## ARIA
|
||
|
|
|
||
|
|
| Part | Attribute | Value |
|
||
|
|
|------|-----------|-------|
|
||
|
|
| Provider | `role` | `switch` |
|
||
|
|
| Provider | `aria-checked` | `true` \| `false` |
|
||
|
|
| Provider | `aria-required` | `true` (when required) |
|
||
|
|
|
||
|
|
## Data Attributes
|
||
|
|
|
||
|
|
| Part | Attribute | Values |
|
||
|
|
|------|-----------|--------|
|
||
|
|
| Provider | `data-switch` | Always present |
|
||
|
|
| Provider | `data-state` | `checked` \| `unchecked` |
|
||
|
|
| Provider | `data-checked` | Present when checked |
|
||
|
|
| Provider | `data-disabled` | Present when disabled |
|
||
|
|
| Thumb | `data-switch-thumb` | Always present |
|
||
|
|
| Thumb | `data-state` | `checked` \| `unchecked` |
|
||
|
|
| Thumb | `data-disabled` | Present when disabled |
|
||
|
|
|
||
|
|
## Keyboard
|
||
|
|
|
||
|
|
| Key | Action |
|
||
|
|
|-----|--------|
|
||
|
|
| `Enter` | Toggle the switch |
|
||
|
|
| `Space` | Toggle the switch (native button behavior) |
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
### Basic
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<script>
|
||
|
|
import { Switch } from '$soma/components';
|
||
|
|
|
||
|
|
let checked = $state(false);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<Switch.Provider bind:checked>
|
||
|
|
<Switch.Thumb />
|
||
|
|
</Switch.Provider>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Disabled
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<Switch.Provider disabled>
|
||
|
|
<Switch.Thumb />
|
||
|
|
</Switch.Provider>
|
||
|
|
```
|
||
|
|
|
||
|
|
### With form name
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<Switch.Provider bind:checked name="notifications" value="enabled">
|
||
|
|
<Switch.Thumb />
|
||
|
|
</Switch.Provider>
|
||
|
|
<!-- Renders a hidden input for form submission -->
|
||
|
|
```
|