Forms

Switch

A setting that applies right away.

import { Switch } from "@flinbu/seed";

States and sizes

Sync with Figma

Email me when Pluto proposes a changeOne email per change request.

Small

Disabled

import { Switch } from "@flinbu/seed";

<div className="flex flex-col gap-sm">
  <Switch label="Sync with Figma" defaultChecked />
  <Switch label="Email me when Pluto proposes a change" description="One email per change request." />
  <Switch size="sm" label="Small" />
  <Switch label="Disabled" disabled />
</div>

Use it for

Turning a feature on or off immediately.

Use something else for

Choices saved with a form: use Checkbox.

Props

Prop	Type	Default	Description
`label, description`	`ReactNode`	`none`	Text next to the switch.
`checked / defaultChecked`	`boolean`	`none`	Controlled or initial state.
`onCheckedChange`	`(checked: boolean) => void`	`none`	Called on change.
`size`	`'sm' \| 'md'`	`'md'`	40 × 20 or 32 × 16 px.
`disabled`	`boolean`	`none`	Can't be changed.

Accessibility

Built on Radix Switch: role switch, Space toggles.