New

Switch

PreviousNext

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

Radix UIBase UI
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

Installation

pnpm dlx shadcn@latest add switch

Usage

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

Examples

Description

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

import {
  Field,
  FieldContent,

Choice Card

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

import {
  Field,
  FieldContent,

Disabled

Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field component for styling.

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

Invalid

Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.

You must accept the terms and conditions to continue.

import {
  Field,
  FieldContent,

Size

Use the size prop to change the size of the switch.

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

RTL

To enable RTL support in DWL Components, see the RTL configuration guide.

يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.

"use client"

import * as React from "react"

API Reference

See the Base UI Switch documentation.