Switch

Switches are a pleasant interface for toggling a value between two states, and offer the same semantics and keyboard navigation as native checkbox elements.

Disable all network connections.

Installation

npx headcn@latest add switch

Usage

Switches are built using the Switch component. You can toggle your switch by clicking directly on the component, or by pressing the spacebar while it's focused.

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

Examples

Description

Disable all network connections on this device.

Choice Card

Card-style selection where Field wraps the entire section for a clickable card pattern.

Disabled