Skip to content
LuoForge/Tungsten
Components/Switch·

Switch

since v0.4.0

Toggle switch — controlled via checked+onCheckedChange or uncontrolled via defaultChecked.

Forwards ref to the root <label>.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten
pnpm add @hey-mike/tungsten
import { Switch } from '@hey-mike/tungsten';
import { Switch } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/switch/page.tsx

import { Switch } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function SwitchSnapshot() {
  return (
    <VariantGrid
      title="Switch"
      variants={[
        { label: 'off', node: <Switch /> },
        { label: 'on', node: <Switch defaultChecked /> },
        { label: 'disabled off', node: <Switch disabled /> },
        { label: 'disabled on', node: <Switch defaultChecked disabled /> },
      ]}
    />
  );
}

import { Switch } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function SwitchSnapshot() {
  return (
    <VariantGrid
      title="Switch"
      variants={[
        { label: 'off', node: <Switch /> },
        { label: 'on', node: <Switch defaultChecked /> },
        { label: 'disabled off', node: <Switch disabled /> },
        { label: 'disabled on', node: <Switch defaultChecked disabled /> },
      ]}
    />
  );
}

Props

Surface specific to <Switch />.

PropTypeDefaultDescription
checkedboolean——
defaultCheckedbooleanfalse—
onCheckedChange((checked: boolean) => void)——
disabledbooleanfalse—
labelstring——
pendingboolean—When true, disables toggling and shows a spinner inside the knob. Sets disabled on the native input element to suppress browser change events. Visual disabled styling (opacity-50) only applies when the disabled prop is also set.

Source