Skip to content
FelicityUI

Switch

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

Installation

terminal
npx felicityui add switch --platform react

Usage

example.tsx
import { Switch } from "@/components/ui/switch"

<Switch />

Composition

Switch
└── (optional) label / description / error

Default

Button-based switch with a sliding thumb — copper track when on.

Description

Helper text under the label.

Anyone with access can use this share link.

Choice card

Label wraps the field for a clickable card pattern.

Disabled

disabled on the switch; data-disabled on the field shell.

Locked by policy.

Invalid

aria-invalid on the switch; data-invalid on the field.

Size

size sm or default.

RTL

Thumb travel mirrors under dir=rtl.

كتابة أحداث الأمان إلى السجل.

API Reference

PropTypeDefaultDescription
checkedboolean—Controlled checked state.
defaultCheckedboolean—Uncontrolled initial checked state.
onCheckedChange(checked: boolean) => void—Called when checked state changes.
size"sm" | "default"—Control size.
labelReactNode—Optional field label.
descriptionReactNode—Helper text below the label.
errorReactNode—Error message; sets invalid styling.
invalidboolean—Marks invalid without requiring error text.
disabledboolean—Disables the switch.
classNamestring—Additional classes on the switch control.
switchVariants({ size?, invalid?, checked?, className? }) => string—Exported class helper for the control.

Accessibility

WCAG 2.2 AA

  • role=switch with aria-checked.
  • Label associated via htmlFor when field chrome is used.
  • aria-invalid and role=alert for errors.
  • Visible focus-visible ring on the control.
  • Thumb travel mirrors in RTL.

Platform notes

React

Native button role=switch with Felicity semantic tokens. Copper track when on — not Base UI / Radix runtime.

  • Client component (controlled checked + onCheckedChange).
  • Uses data-slot=switch|switch-thumb; field chrome uses data-slot=field|field-label|field-description|field-error.
  • data-invalid and data-disabled on the field shell when chrome is present.
  • size sm|default; supports aria-invalid / invalid / error.