Form
Switch
Toggle switch component for binary on/off choices in forms and settings.
Overview
Enables users to compare monthly versus annual pricing options easily. Toggle the entire pricing page between billing views. Display strikethrough prices when annual billing shows discounts. Persists billing preference in localStorage so it remains selected during navigation. Communicates savings visually to encourage annual subscription commitments.
Key Business & UX Benefits
- Lets users switch between monthly and annual billing in one place.
- Savings display encourages annual commitment without pressure.
- Persisted preference keeps the choice across navigation.
- Small and medium sizes fit headers and pricing blocks.
Pro-Tip from Larry: Show savings on the annual option so users see the benefit at a glance.
Usage
Different Sizes
Switch Small
<LuiSwitch />
Switch Medium
<LuiSwitch />
Checked State
Switch checked
<LuiSwitch />
Disabled State
Switch Unchecked Disabled
<LuiSwitch />
Switch Checked Disabled
<LuiSwitch />
Feature List
- Toggle between monthly and annual billing cycles
- Display savings percentage or amount for annual billing
- Synchronized update of all pricing cards when toggled
- Persisted preference via localStorage using useStorage
API Reference
| Prop | Default | Type |
|---|---|---|
defaultChecked | false | boolean |
disabled | false | boolean |
id | string | |
name | string | |
value | string | |
required | false | boolean |
size | medium | "small" | "medium" |
checked | boolean |
| Event | Type |
|---|---|
update:checked | (event: "update:checked", value: boolean | undefined): void |