Switch
A toggle control that allows users to turn a setting on or off
Installation
pnpm add @tessinaui/uiUsage
import { Switch } from "@tessinaui/ui";<Switch label="Enable notifications" defaultChecked />Playground
Configure every property of the Switch component interactively:
Preview
Loading...
Showcase
All sizes, states, and label combinations:
Preview
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Size of the switch |
checked | boolean | — | Controlled checked state |
defaultChecked | boolean | false | Uncontrolled default state |
onCheckedChange | (checked: boolean) => void | — | Called when checked state changes |
disabled | boolean | false | Disables the switch |
label | string | — | Label text displayed next to the switch |
description | string | — | Supporting description text below the label |
labelPosition | "left" | "right" | "right" | Side of the switch the label appears on |
showIcon | boolean | true | Show checkmark icon in the knob when on |
Sizes
Three sizes are available:
- sm — Compact (20px × 36px track)
- md — Default (32px × 64px track, matches Figma design)
- lg — Large (36px × 72px track)
States
| State | Description |
|---|---|
| Off | Default unchecked state |
| On | Checked state with success color and checkmark |
| Disabled off | Greyed out, non-interactive |
| Disabled on | Checked but non-interactive |
| Focus | Visible focus ring for keyboard navigation |
Accessibility
The Switch component:
- Uses Radix UI's
Switchprimitive for full accessibility - Role:
switchwitharia-checkedstate - Keyboard:
Spaceto toggle,Tabto focus - Label is associated via
htmlFor/id - Includes visible
focus-visiblering (WCAG 2.1 AA) - Touch target meets 44×44px minimum on all sizes
- Disabled state communicated via
aria-disabled
Radio
A form control that lets users select exactly one option from a group. Five sizes, five intents, label/description/error patterns, RadioGroup compound component, and RadioCard full-surface variant.
Slider
A range input control built on Base UI. Two visual variants (discrete and continuous), five intents, three sizes, horizontal and vertical orientation, range mode, tick marks, value tooltip, and RTL support.