form

Switch

Name: shadcn-angular
Rating: 5 (100 reviews)
Author: shadcn-angular

A control that allows the user to toggle between checked and not checked.

Preview

A preview of the Switch component with interactive controls.

Preview Code

Airplane Mode

Interactive

Installation

Add the Switch component to your project.

Bash

ng g @ng-cn/core:c switch

Usage

Import and use the Switch component in your Angular application.

Template TypeScript

template.html

<div class="flex items-center space-x-2">
  <Switch id="airplane-mode" [(checked)]="enabled" />
  <Label htmlFor="airplane-mode">Airplane Mode</Label>
</div>

Examples

Explore different variations and use cases for the Switch component.

Basic

Preview Code

Interactive

API Reference

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the switch is checked.
`disabled`	`boolean`	`false`	Whether the switch is disabled.
`id`	`string`	—	The id of the switch.