Loading playground
Overview
Switch is a binary on/off toggle for forms, settings, and inline preferences. Wrap it in <LField> to pick up shared disabled, required, and error state without prop-drilling. Pair invalid with Field's errorMessage for accessible error styling.
Key Business & UX Benefits
- Clear on/off affordance signals that a change applies immediately, which is what users expect for preferences and notification settings.
- Field integration covers required, disabled, and error states without extra wiring, so toggles in checkout (gift wrap, paper-free billing) stay accessible.
- Consistent sizing (s/m) and motion make every Switch on the site feel like the same control, which reduces the learning curve across account, settings, and forms.
Pro-Tip from Larry: Use Switch for state that takes effect immediately (a setting). For confirm-then-apply choices in a form, reach for Checkbox.
Different Sizes
Switch Medium
<LSwitch v-model="enabled" size="m" />
Checked State
Switch checked
<LSwitch v-model="enabled" />
Disabled State
Switch Unchecked Disabled
<LSwitch v-model="enabled" disabled />
Switch Checked Disabled
<LSwitch v-model="enabled" disabled />
Feature List
- Two sizes ('s', 'm') keep the toggle in proportion with form, settings, and inline preference rows
- Boolean v-model with checked/unchecked plus disabled and `:focus-visible` states, so the control fits accessibility audits without extra wiring
- Inherits `<LField>` `disabled`, `required`, and `invalid` state so wrapped switches pick up form chrome automatically
- Used internally by `HighlightToggle`, so promotional toggles stay consistent with regular preference switches
- Plain semantic toggle: pairs cleanly with Label for click-to-toggle association on the entire row
API Reference
| Prop | Default | Type |
|---|---|---|
defaultChecked | false | boolean |
disabled | false | boolean |
id | string | |
name | string | |
value | string | |
required | false | boolean |
invalid | false | boolean |
size | m | "s" | "m" |
modelValue | boolean |
| Event | Type |
|---|---|
update:modelValue | (event: "update:modelValue", value: boolean | undefined): void |