Switch

since 1.0

Switch is a toggle control for binary on/off states.

Example

Install

import { Switch } from "@strongtie/design-system/switch"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Props

All components accept standard HTML attributes and React props.

When not to use it

Don't use a switch for a value the user submits with a form — use a Checkbox, which carries a checked state into form data and supports an indeterminate third state. Switches imply the change takes effect the moment it is flipped, so they belong in settings and preference panels, not inside a save-and-submit flow.

Examples

With Label

Airplane Mode

"use client"

import { Label } from "@strongtie/design-system/label"
import { Switch } from "@strongtie/design-system/switch"

export function SwitchWithLabel() {
  return (
    <div className="flex items-center gap-1 space-x-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  )
}

Spinner Tab Nav

On This Page

Example Install Props When not to use it Examples With Label