Forms

Switch

Two-state toggle. Use for on/off settings; prefer Checkbox for multi-select forms.

Preview

'use client';

import { Switch } from '@brika/clay/components/switch';

/** Uncontrolled switch in its default on state. */
export default function SwitchDefaultDemo() {
  return <Switch defaultChecked />;
}

01 Installation

Install

Pull Switch from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Switch } from "@brika/clay";

tsxGranular1 line

import { Switch } from "@brika/clay/components/switch";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxSwitch.tsx8 lines

'use client';

import { Switch } from '@brika/clay/components/switch';

/** Uncontrolled switch in its default on state. */
export default function SwitchDefaultDemo() {
  return <Switch defaultChecked />;
}

03 Examples

Switch, every way

Controlled

Controlled switch with live state label next to it.

GitHub

'use client';

import { Switch } from '@brika/clay/components/switch';
import { useState } from 'react';

/** Controlled switch with live state label next to it. */
export default function SwitchControlledDemo() {
  const [on, setOn] = useState(false);

  return (
    <div className="flex items-center gap-3">
      <Switch checked={on} onCheckedChange={setOn} />
      <span className="font-mono text-clay-subtle text-xs">{on ? 'on' : 'off'}</span>
    </div>
  );
}

Disabled

Disabled switch states, both checked and unchecked.

GitHub

'use client';

import { Label } from '@brika/clay/components/label';
import { Switch } from '@brika/clay/components/switch';

/** Disabled switch states, both checked and unchecked. */
export default function SwitchDisabledDemo() {
  return (
    <div className="flex items-center gap-6">
      <div className="flex items-center gap-3">
        <Switch disabled />
        <Label className="opacity-50">Disabled off</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch disabled defaultChecked />
        <Label className="opacity-50">Disabled on</Label>
      </div>
    </div>
  );
}

Label

Switch paired with a Label, clicking the label text also toggles the switch.

GitHub

'use client';

import { Label } from '@brika/clay/components/label';
import { Switch } from '@brika/clay/components/switch';

/** Switch paired with a Label, clicking the label text also toggles the switch. */
export default function SwitchLabelDemo() {
  return (
    <div className="flex items-center gap-3">
      <Switch id="dark-mode" />
      <Label htmlFor="dark-mode">Enable dark mode</Label>
    </div>
  );
}

Settings Row

Settings row pattern, switch with a title and description label.

GitHub

'use client';

import { Switch } from '@brika/clay/components/switch';
import { useState } from 'react';

/** Settings row pattern, switch with a title and description label. */
export default function SwitchSettingsRowDemo() {
  const [enabled, setEnabled] = useState(true);

  return (
    <div className="flex w-full max-w-sm items-center justify-between gap-4 rounded-lg border border-clay-hairline px-4 py-3">
      <div>
        <p className="text-sm font-medium">Auto-save drafts</p>
        <p className="text-xs text-clay-subtle">Saves your work every 30 seconds.</p>
      </div>
      <Switch checked={enabled} onCheckedChange={setEnabled} />
    </div>
  );
}

04 Accessibility

Accessibility

Carries role="switch" with aria-checked, AT announces "on" / "off" state.
Pair with a <Label>, clicking the label also toggles the switch.
Disabled switches carry aria-disabled and are removed from the tab order.
Use Switch for binary on/off settings; use Checkbox for multi-select form fields.

05 Tokens 11 theme-overridable

Theme tokens

Every CSS variable Switch reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Switch without touching component code.

Switch tokens

11 tokens

ColorFill, border, and text colors.4

--switch-checked-containercolorvar(--primary)
components.switch.checkedContainer
Track background when the switch is on (`data-[state=checked]`).
--switch-unchecked-containercolorvar(--input)
components.switch.uncheckedContainer
Track background when the switch is off (`data-[state=unchecked]`). Dark mode applies an 80% opacity automatically.
--switch-focus-bordercolorvar(--ring)
components.switch.focusBorder
Border color drawn on the track when keyboard focus lands on the switch (`focus-visible`). Pairs with `focus-ring` to render the focus halo.
--switch-focus-ringcolorvar(--ring)
components.switch.focusRing
Color of the 3px focus halo painted around the switch on `focus-visible`. Rendered at 50% opacity to soften the outer glow.

GeometrySizes, lengths, and corner radii.3

--switch-track-widthsize2.5rem
components.switch.trackWidth
Switch track width. Fits two thumb diameters + padding + border.
--switch-track-heightsize1.5rem
components.switch.trackHeight
Switch track height. Leaves room for thumb + padding + border.
--switch-radiusradius9999px
components.switch.radius
Switch track corner radius. Default is fully rounded.

BorderBorder width and style.2

--switch-border-widthborder-width0px
components.switch.borderWidth
Border width on the switch. Set non-zero for outline-style variants.
--switch-border-styleborder-stylesolid
components.switch.borderStyle
Border style on the switch (`solid`, `dashed`, `double`, `none`).

MotionAnimation duration and easing.2

--switch-durationdurationvar(--motion-standard-duration)
components.switch.duration
Transition duration for switch state changes.
--switch-easingeasingvar(--motion-standard-easing)
components.switch.easing
Transition easing for switch state changes.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.switch, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "switch": {
      "radius": "9999px"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-switch-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Switch. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

sizedefault 'default'
'sm' | 'default'
Preset size for the switch track and thumb.