Switch - Stera UI

Airplane Mode

Installation

pnpm dlx stera-ui add switch

Usage

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

<Switch />

With Label

Pair with Field and FieldLabel for an accessible labeled switch.

Airplane Mode

<Field orientation="horizontal">
  <Switch id="airplane-mode" />
  <FieldLabel htmlFor="airplane-mode">Airplane Mode</FieldLabel>
</Field>

With Description

Place FieldContent between the label and switch to add a description.

Marketing emails

Receive emails about new products, features, and more.

<Field orientation="horizontal">
  <FieldContent>
    <FieldLabel htmlFor="marketing">Marketing emails</FieldLabel>
    <FieldDescription>
      Receive emails about new products, features, and more.
    </FieldDescription>
  </FieldContent>
  <Switch id="marketing" />
</Field>

Sizes

Default

Small

Size	Description
`default`	Standard size
`sm`	Compact size

Disabled

Airplane Mode

<Field orientation="horizontal" data-disabled="true">
  <Switch id="airplane-mode" disabled />
  <FieldLabel htmlFor="airplane-mode">Airplane Mode</FieldLabel>
</Field>

API Reference

Built on Base UI's Switch primitive.

Prop	Type	Default
`size`	`"default" \| "sm"`	`"default"`
`checked`	`boolean`	—
`defaultChecked`	`boolean`	—
`onCheckedChange`	`(checked: boolean) => void`	—
`disabled`	`boolean`	`false`
`name`	`string`	—
`value`	`string`	—