Mushilu-San UI Toggle
An on/off switch for a setting that takes effect immediately.
Selector: mui-toggle
import { Toggle } from '@mushilu-san/ui/forms';Loading example…
Overview
role="switch" and aria-checked. Its checked model is two-way bindable. Set label so the switch has an accessible name.
When to use
Turning a feature or notification on or off. A setting where the change is saved or visible immediately.
When not to use
A choice that is submitted with a form. Use a checkbox. Use Checkbox instead.
Examples
Sizes and disabled
Loading example…
Guidelines
Do
Use a label that describes the setting, not the state. "Email alerts", not "On".
Don't
Do not use a toggle for an action, such as "Send". Use a button.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | switch | aria-checked follows checked. aria-disabled when disabled. |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| SpaceEnter |
Set labelon the switch, or give it anaria-label.
API
Toggle
| Name | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Switch size: `sm`, `md` or `lg`. Default `md`. |
label | string | undefined | — | Accessible name for the switch, also shown as text when provided. |
disabled | boolean | false | Disables the switch. Sets `aria-disabled` and ignores input. Accepts attribute presence, e.g. <… disabled>. |
| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Whether the switch is on. Two-way bindable with `[(checked)]`. |
CSS parts
::part(root)
Tokens
--mui-color-primary--mui-color-border--mui-color-surface--mui-color-focus-ring--mui-touch-target