UI Components

Switch

An accessible toggle switch supporting controlled, uncontrolled, and labeled modes

Quick Preview

Enable notifications

Structure

Anatomy of the Switch — a track with a sliding thumb and an optional label.

TrackThumb

label (optional)

Track — teal when on, gray when offThumb — slides on toggleLabel + description — optional

States

Click any switch to toggle it — all state transitions are live.

Switch — all states

Click to toggle; disabled switches cannot be interacted with

4 states

Notifications

Off

Default · unchecked

Notifications

Checked · click to try

Notifications

Disabled off

Cannot interact

Notifications

Disabled on

Locked in on state

Sizes

Three size tokens — sm md (default) lg.

Sizes — sm / md / lg

Toggle each switch to compare thumb and track dimensions

3 states

Small switch

Small — sm

w-8 h-4 · compact

Medium switch

Medium — md

w-11 h-6 · default

Large switch

Large — lg

w-14 h-7 · spacious

Installation

// Copy the Switch component from
src/components/ui/Switch.tsx

Usage

'use client'
import { Switch } from '@/components/ui/Switch'

// Uncontrolled
<Switch label="Dark mode" />

// Controlled
const [enabled, setEnabled] = useState(false)
<Switch checked={enabled} onChange={setEnabled} label="Dark mode" />

Examples

With Description

Marketing emailsReceive news, updates, and promotions.

Sizes

Small

Medium (default)

Large

Settings List

Push notificationsAlerts on your device

Email digestWeekly summary

SMS alertsUnavailable in your region

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a ui component named Switch in React/Next.js.
Goal: recreate the same overall UI and behavior as the Switch reference from a component gallery.
What it needs to communicate: An accessible toggle switch supporting controlled, uncontrolled, and labeled modes.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Keep the API concise and reusable.
- Make visual states feel polished and consistent across variants and sizes.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- checked: boolean — Controlled checked state
- defaultChecked: boolean — Initial state for uncontrolled mode
- onChange: (checked: boolean) => void — Callback fired on toggle
- label: string — Label text next to the switch
- description: string — Secondary description below label
- size: "sm" | "md" | "lg" — default "md" — Switch size
- disabled: boolean — Disable the switch

Reference usage patterns:
- Basic Switch

```tsx
<Switch label="Enable notifications" />
```

- Controlled

```tsx
<Switch checked={on} onChange={setOn} label="Feature flag" />
```

Feature expectations:
- Controlled and uncontrolled modes
- role="switch" + aria-checked for accessibility
- Label and description slots
- Three sizes (sm, md, lg)
- Primary color when checked
- focus-visible ring
- Client Component

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`checked`	`boolean`	-	Controlled checked state
`defaultChecked`	`boolean`	-	Initial state for uncontrolled mode
`onChange`	`(checked: boolean) => void`	-	Callback fired on toggle
`label`	`string`	-	Label text next to the switch
`description`	`string`	-	Secondary description below label
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Switch size
`disabled`	`boolean`	-	Disable the switch

Features

✓Controlled and uncontrolled modes
✓role="switch" + aria-checked for accessibility
✓Label and description slots
✓Three sizes (sm, md, lg)
✓Primary color when checked
✓focus-visible ring
✓Client Component