Switch

A strict, minimalist toggle switch.

A toggle switch for ON/OFF binary settings. Built with Monolith's strict rules, featuring a rounded-none track but a rounded-full (9999px) knob as explicitly permitted by the design spec.

Airplane Mode

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/switch.json"

Usage

import { Switch } from "@/components/ui/switch"
 
export function SwitchDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <label htmlFor="airplane-mode" className="text-sm font-medium leading-none">
        Airplane Mode
      </label>
    </div>
  )
}

Examples

Disabled

When the switch is disabled, it receives lowered opacity (opacity-50) and prevents pointer events.

Airplane Mode (Disabled)

With Text

A standard use-case where the switch is paired with a label and a description.

Push Notifications

Receive notifications when someone mentions you.

API Reference

The Switch component uses Radix UI Primitives. For a complete API reference, please refer to the Radix UI Switch Documentation.

Prop	Type	Default	Description
`checked`	`boolean`	-	The controlled checked state of the switch.
`defaultChecked`	`boolean`	`false`	The checked state when initially rendered.
`onCheckedChange`	`function`	-	Event handler called when the checked state changes.
`disabled`	`boolean`	`false`	When `true`, prevents the user from interacting with the switch.
`required`	`boolean`	`false`	When `true`, indicates that the user must check the switch before the owning form can be submitted.

Spinner Tabs

On This Page

Installation Usage Examples Disabled With Text API Reference