Toggle
An immediate on/off — an email preference, a visibility setting. Use it where the change applies as soon as it is flipped, with no save button.
import Toggle from '@/components/ui/Toggle';Source: src/components/ui/Toggle.tsx
Examples
On and off
Email updates on
Props
<Toggle> props
| Prop | Type | Default | Description |
|---|---|---|---|
color | 'blue' | 'green' | 'red' | 'gold' | 'blue' | — |
Also accepts everything in Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> — so native attributes (id, onClick, aria-*, data-*) pass straight through.
Accessibility
- A real checkbox underneath, so Space toggles it. aria-label is required because the visual is a switch with no text.
Usage
Do
- Pass aria-label (it is required) or label it with a Field-style label beside it.
- Apply the change immediately, and confirm with a Toast if it is not visible on screen.
Don’t
- Don’t put a Toggle in a form with a save button — a switch that has not taken effect yet is a lie about its state.