Switch | Cortexcn

Airplane Mode

Installation

pnpm dlx shadcn@latest add @cortexcn/switch

pnpm dlx shadcn@latest add @cortexcn/switch

Usage

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

Examples

Basic

Airplane Mode

import { Field, FieldLabel } from "@/components/field"
import { Switch } from "@/components/switch"

export function SwitchBasic() {
  return (
    <div className="flex flex-col gap-6">
      <Field orientation="horizontal">
        <Switch id="switch-basic" />
        <FieldLabel htmlFor="switch-basic">Airplane Mode</FieldLabel>
      </Field>
    </div>
  )
}

import { Field, FieldLabel } from "@/components/field"import { Switch } from "@/components/switch"export function SwitchBasic() {  return (    <div className="flex flex-col gap-6">      <Field orientation="horizontal">        <Switch id="switch-basic" />        <FieldLabel htmlFor="switch-basic">Airplane Mode</FieldLabel>      </Field>    </div>  )}

With description

Share across devices

Focus is shared across devices, and turns off when you leave the app.

import { Field, FieldContent, FieldDescription, FieldLabel, FieldTitle } from "@/components/field"
import { Switch } from "@/components/switch"

export function SwitchWithDescription() {
  return (
    <div className="flex flex-col gap-6">
      <FieldLabel htmlFor="switch-focus-mode">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Share across devices</FieldTitle>
            <FieldDescription>
              Focus is shared across devices, and turns off when you leave the
              app.
            </FieldDescription>
          </FieldContent>
          <Switch id="switch-focus-mode" />
        </Field>
      </FieldLabel>
    </div>
  )
}

import { Field, FieldContent, FieldDescription, FieldLabel, FieldTitle } from "@/components/field"import { Switch } from "@/components/switch"export function SwitchWithDescription() {  return (    <div className="flex flex-col gap-6">      <FieldLabel htmlFor="switch-focus-mode">        <Field orientation="horizontal">          <FieldContent>            <FieldTitle>Share across devices</FieldTitle>            <FieldDescription>              Focus is shared across devices, and turns off when you leave the              app.            </FieldDescription>          </FieldContent>          <Switch id="switch-focus-mode" />        </Field>      </FieldLabel>    </div>  )}

With label

Bluetooth

import { Label } from "@/components/label"
import { Switch } from "@/components/switch"

export function SwitchWithLabel() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-2">
        <Switch id="switch-bluetooth" defaultChecked />
        <Label htmlFor="switch-bluetooth">Bluetooth</Label>
      </div>
    </div>
  )
}

import { Label } from "@/components/label"import { Switch } from "@/components/switch"export function SwitchWithLabel() {  return (    <div className="flex flex-col gap-6">      <div className="flex items-center gap-2">        <Switch id="switch-bluetooth" defaultChecked />        <Label htmlFor="switch-bluetooth">Bluetooth</Label>      </div>    </div>  )}

Disabled

Disabled (Unchecked)

Disabled (Checked)

import { Label } from "@/components/label"
import { Switch } from "@/components/switch"

export function SwitchDisabled() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-12">
        <div className="flex items-center gap-2">
          <Switch id="switch-disabled-unchecked" disabled />
          <Label htmlFor="switch-disabled-unchecked">
            Disabled (Unchecked)
          </Label>
        </div>
        <div className="flex items-center gap-2">
          <Switch id="switch-disabled-checked" defaultChecked disabled />
          <Label htmlFor="switch-disabled-checked">Disabled (Checked)</Label>
        </div>
      </div>
    </div>
  )
}

import { Label } from "@/components/label"import { Switch } from "@/components/switch"export function SwitchDisabled() {  return (    <div className="flex flex-col gap-6">      <div className="flex flex-col gap-12">        <div className="flex items-center gap-2">          <Switch id="switch-disabled-unchecked" disabled />          <Label htmlFor="switch-disabled-unchecked">            Disabled (Unchecked)          </Label>        </div>        <div className="flex items-center gap-2">          <Switch id="switch-disabled-checked" defaultChecked disabled />          <Label htmlFor="switch-disabled-checked">Disabled (Checked)</Label>        </div>      </div>    </div>  )}

Sizes

Small

Default

import { Label } from "@/components/label"
import { Switch } from "@/components/switch"

export function SwitchSizes() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-12">
        <div className="flex items-center gap-2">
          <Switch id="switch-size-sm" size="sm" />
          <Label htmlFor="switch-size-sm">Small</Label>
        </div>
        <div className="flex items-center gap-2">
          <Switch id="switch-size-default" size="default" />
          <Label htmlFor="switch-size-default">Default</Label>
        </div>
      </div>
    </div>
  )
}

import { Label } from "@/components/label"import { Switch } from "@/components/switch"export function SwitchSizes() {  return (    <div className="flex flex-col gap-6">      <div className="flex flex-col gap-12">        <div className="flex items-center gap-2">          <Switch id="switch-size-sm" size="sm" />          <Label htmlFor="switch-size-sm">Small</Label>        </div>        <div className="flex items-center gap-2">          <Switch id="switch-size-default" size="default" />          <Label htmlFor="switch-size-default">Default</Label>        </div>      </div>    </div>  )}

Adapted from the shadcn/ui Switch (MIT).