Components · Inputs
Switch
BetaA setting that takes effect immediately, such as check-in reminders.
- Source
components/ui/switch.tsx - shadcn/ui Switch
- Figma: not linked yet (Q13)
Remind clients the day before their weekly check-in.
When to use
- For a setting that takes effect as soon as it changes: check-in reminders, accepting new clients, showing calories to clients.
When not to use
- Inside a form that is saved with a button: use a Checkbox.
- To choose between two things that are not on and off ("kg" or "lb"): use a Radio group.
Anatomy
- 1. Label, and an optional description
- 2. Track and thumb: the thumb moves to the end when on
Variants
Two sizes: default for settings pages, sm inside table rows and dense lists.
States
| State | What changes | Token |
|---|---|---|
| Off | Neutral track | bg-input |
| On | Track in the primary color, thumb at the end | bg-primary |
| Focus-visible | Ring | ring-ring/50 |
| Disabled | Half opacity | opacity-(--opacity-disabled) |
Usage guidelines
- Apply the change immediately and confirm it ("Reminders turned on") only if it affects clients.
- Put the switch at the end of the row, with its label at the start, in settings lists.
- If a change can't apply instantly (it needs saving or loading), show a spinner or use a checkbox instead.
Content guidelines
- The label names the setting, not the action: "Check-in reminders", not "Turn on reminders".
- Don't add "On" and "Off" text next to the switch; the state is announced.
Accessibility
| Key | Does |
|---|---|
| Tab | Moves to the switch |
| Space or Enter | Toggles it |
- Rendered as
role="switch"witharia-checked. Announced as "Check-in reminders, switch, on".
RTL
The thumb moves toward the end edge when on: left in RTL. The upstream component only moved it right, so it slid out of the track in RTL; this version adds the mirrored transform.
Tokens used
Read from components/ui/switch.tsx at build time, so this list changes when the component does. Opacity modifiers such as /90 are shadcn hover and focus tints on top of the token.
| Token | Utilities | SuperCoach | Coach |
|---|---|---|---|
| --background | bg-background | white | white |
| --input | bg-input | neutral-200 | neutral-200 |
| --primary | bg-primary | brand-600 | orange-500 |
| --ring | border-ring ring-ring/50 | brand-600 | orange-500 |
- Opacity
opacity-(--opacity-disabled) - Radius
rounded-full - Shadow
shadow-xs
Props
<Switch>
Also takes every prop of Radix Switch.Root
| Prop | Type | Default |
|---|---|---|
| size? | "sm" | "default" | "default" |
Replaces in coach-admin
From the read-only audit of coach-admin: 44 style values, 56 uses.
Classes and selectors
.switch-label7.switch-handle7.switch-label::before, .switch-label::after3.switch-label::before1.switch-label, .switch-handle1
Files
src/reusableComponents/features/featureToggle.scss37
The inventory lists the first 12 locations of each value, so file counts are a lower bound.
SCSS variables in these styles
$spacing-smnot a color: spacing, size or layout$spacing-xsnot a color: spacing, size or layout$heightnot a color: spacing, size or layout$handle-marginnot a color: spacing, size or layout$light-surface-bg→--muted$font-sizenot a color: spacing, size or layout$light-primary-colornot a color: spacing, size or layout$primary-border-colornot a color: spacing, size or layout$primary-color-hovernot a color: spacing, size or layout$gray-200→ nearest neutral-300 (no semantic token)$gray-100→ nearest neutral-100 (no semantic token)$primary-color→--primary