Switch

Installation

$ npx shadcn@latest add https://goodui.dev/r/switch.json

The file lands in components/goodui/switch.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/switch works too.

Usage

import * as React from "react"
import { Switch } from "@/components/goodui/switch"

export function ReminderSettings() {
  const [sms, setSms] = React.useState(true)
  const [saving, setSaving] = React.useState(false)

  const toggleSms = async (next: boolean) => {
    setSaving(true)
    await fetch("/api/settings", { method: "PATCH", body: JSON.stringify({ smsReminders: next }) })
    setSms(next)
    setSaving(false)
  }

  return (
    <div className="flex max-w-md flex-col gap-4">
      <Switch
        checked={sms}
        onCheckedChange={toggleSms}
        loading={saving}
        label="SMS reminders"
        description="Clients get a text 24 hours before their appointment."
        labelPosition="left"
      />
      <Switch defaultChecked label="Online booking" labelPosition="left" tone="success" name="onlineBooking" />
    </div>
  )
}

When to use

Examples

<Switch variant="label-inside" defaultChecked aria-label="Auto-renew" />

<Switch variant="label-inside" onText="AN" offText="AUS" label="Erinnerungen" />

<Switch icons="theme" variant="material" size="lg" checked={dark} onCheckedChange={setDark} aria-label="Dark mode" />

API reference

Accessibility

• •A native <button role="switch"> with aria-checked, so screen readers announce on and off.
• •label and description are linked with aria-labelledby and aria-describedby, and the whole row is a <label>, so clicking the text toggles it.
• •Without label, pass aria-label. The thumb, its glyphs and the ON / OFF text are aria-hidden.
• •loading sets aria-busy and ignores clicks; disabled disables the button and dims the row.
• •icon-thumb and label-inside show the state with a glyph or text, not only with color.

Motion

• •spring (default): the thumb slides on a spring (stiffness 620, damping 36). smooth: a 200 ms ease. bounce: a looser spring (stiffness 520, damping 13) with a squash and stretch of the thumb over 340 ms. none: it jumps.
• •Press: the thumb stretches toward the travel direction (material grows to 1.12; neo pushes the whole track into its shadow).
• •material shrinks the thumb when off unless it shows a glyph. Glyphs swap with a rotate and scale (300 ms, slight overshoot) and a 200 ms fade. Track color changes in 220 ms.
• •Reduced motion: the thumb jumps with no press stretch and no transitions; the loading spinner slows to 1.6 s per turn instead of stopping.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related