Dots

Switch

PreviousNext

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

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

Installation

pnpm dlx shadcn@latest add @dots/switch

Usage

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

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 isDisabled 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 data-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"

API Reference

See the React Aria Switch documentation.