Docs
components
Switch

Switch

A switch allows a user to turn a setting on or off.

There is no native HTML element with switch styling. <input type="checkbox"> is the closest semantically, but isn't styled or exposed to assistive technology as a switch. Switch helps achieve accessible switches that can be styled as needed.

Preview

Code

Low power mode

Installation

CLI

Copy & Paste

NPM

PNPM

Bun

Yarn

npx shadcn@latest add https://backchanel.com/default/switch

Usage

Basic

Preview

Code

Low power mode

Disabled

Preview

Code

Airplane Mode

Readonly

Preview

Code

Bluetooth

Slider TextField