Shadcn Switch for React

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/switch.json

npx shadcn@latest add https://kit.dev/r/aria/switch.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/switch.json

yarn shadcn@latest add https://kit.dev/r/aria/switch.json

bun add react-aria-components

npm install react-aria-components

pnpm add react-aria-components

yarn add react-aria-components

"use client";

import {
  composeRenderProps,
  Switch as SwitchPrimitive,
  type SwitchProps as SwitchPrimitiveProps,
} from "react-aria-components";
import { cn } from "@/lib/utils";

export const Switch = (
  props: SwitchPrimitiveProps & {
    size?: "sm" | "default";
  }
) => {
  const { className, size = "default", children, ...rest } = props;

  return (
    <SwitchPrimitive

Anatomy

Switch
├── SwitchLabel
├── SwitchControl
└── SwitchThumb

Usage

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

<Field className="w-fit" orientation="horizontal">
  <Switch />
  <FieldLabel>Airplane Mode</FieldLabel>
</Field>

Accessibility

Demos

Description

Switch with a label and description.

Choice Card

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

Disabled

Add the disabled prop to the Switch and Field to disable the control.

Invalid

Add aria-invalid to the Switch and invalid to the Field for invalid styling.

Sizes

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

Rtl

Right-to-left switch. See the RTL configuration guide for document direction.

API Reference