Switch

A setting that takes effect the moment it changes. On and off differ in position, a hollow or solid thumb and a mark, never colour alone. In a form that waits for Save, use a checkbox.

Loading the live example…

"use client"

import { useState } from "react"
import { SwitchField } from "@/components/keyline/ui/switch"

export function AlertSettings() {
  const [reorder, setReorder] = useState(true)
  const [late, setLate] = useState(false)

  const on = [reorder && "reorders", late && "late deliveries"].filter(Boolean)

  return (
    <div className="grid max-w-[480px] gap-3">
      <div className="grid gap-1">
        <SwitchField label="Email me when a client reorders" description="One email a day, at 8 AM." checked={reorder} onCheckedChange={setReorder} />
        <SwitchField label="Text me if a delivery runs late" description="Darryl marks it late after 30 minutes." checked={late} onCheckedChange={setLate} />
        <SwitchField label="Weekly sales report" description="Corporate sends this to every branch. Ask Jan to stop it." checked disabled />
      </div>
      <p role="status" className="m-0 text-[14px] text-kl-ink-2">
        {on.length ? `You'll hear about ${on.join(" and ")}.` : "Only the weekly report. Nothing else will reach you."}
      </p>
    </div>
  )
}

Installation

npx shadcn@latest add @keyline-ui/switch

Run it where your components.json is. The first time, map the @keyline-ui registry: one command, in Installation.

Usage

import { SwitchField } from "@/components/keyline/ui/switch"

<SwitchField
  label="Email me when a client reorders"
  description="One email a day, at 8 AM."
  checked={reorder}
  onCheckedChange={setReorder}
/>

Props

Prop	Type	Default	Description
`label`	`ReactNode`	`—`	On `SwitchField`: the setting's name. The whole row flips the switch.
`description`	`ReactNode`	`—`	A line under the label, read out with it.
`checked`	`boolean`	`—`	With `onCheckedChange`. Or start with `defaultChecked`.
`disabled`	`boolean`	`false`	For a setting someone else controls. Say who in the description.
`layout`	`"control" \| "cell"`	`"control"`	`cell` is a row inside another frame, such as a panel.

Also exported: Switch, the bare control; give it an aria-label. Built on Base UI Switch; its other props pass through.