Switch

A control that allows the user to toggle between checked and not checked.

Airplane Mode

<div className="flex items-center gap-2">
  <Switch id="airplane-mode" />
  <label htmlFor="airplane-mode">Airplane Mode</label>
</div>

Installation

pnpm dlx cubix@latest add switch --base aria

Usage

Import

import { Switch } from "@/components/cubix/switch"

Example

<div className="flex items-center gap-2">
  <Switch id="airplane-mode" />
  <label htmlFor="airplane-mode">Airplane Mode</label>
</div>

Examples

With label

Pass children to render a label next to the switch, or compose your own label with htmlFor.

<div className="grid gap-3">
  <Switch defaultChecked>Notifications</Switch>
  <Switch>Marketing emails</Switch>
</div>

Disabled

<div className="grid gap-3">
  <Switch disabled>Unavailable</Switch>
  <Switch disabled defaultChecked>Locked on</Switch>
</div>

Sizes

Small

Default

<div className="grid gap-3">
  <div className="flex items-center gap-2">
    <Switch size="sm" id="switch-sm" />
    <label htmlFor="switch-sm">Small</label>
  </div>
  <div className="flex items-center gap-2">
    <Switch id="switch-default" />
    <label htmlFor="switch-default">Default</label>
  </div>
</div>

Settings row

Pair a switch with a title and description for preference panels.

Share analyticsHelp us improve Cubix by sending anonymous usage data.

<div className="flex w-full max-w-sm items-center justify-between gap-4 rounded-lg border p-4">
  <div className="grid gap-1">
    <span className="text-sm font-medium">Share analytics</span>
    <span className="text-sm text-muted-foreground">
      Help us improve Cubix by sending anonymous usage data.
    </span>
  </div>
  <Switch defaultChecked aria-label="Share analytics" />
</div>

API Reference

Props

Prop	Type	Default	Description
checked	boolean	false	Controlled checked state of the switch. Use with `onCheckedChange`.
defaultChecked	boolean	false	Default checked state for uncontrolled usage.
onCheckedChange	(checked: boolean) => void	-	Called with the next checked value whenever the switch is toggled.
size	"default" \| "sm"	"default"	The size of the switch.
disabled	boolean	false	Disables the switch.
name	string	-	The name attribute passed when submitting a form.
value	string	on	The value attribute passed when submitting a form.
aria-invalid	boolean	false	When true, indicates the switch is in an invalid state.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
...props	React.ComponentProps<'input'>	-	All native input attributes (id, form, tabindex, aria-*, ...) are forwarded to the rendered element.

Variants

Prop	Type	Default	Description
default	-	-	On state uses the primary background; off uses the input track.
disabled	-	-	Disabled switches cannot be interacted with.