Switch
A toggle control that allows users to turn a setting on or off
Playground
Installation
pnpm add @tessinaui/uiUsage
import { Switch } from "@tessinaui/ui";<Switch label="Enable notifications" defaultChecked />Examples
Default
A basic switch with a label, toggled on by default.
With Description
Pair a label with supporting description text for additional context.
Sizes
Three sizes — sm, md, and lg.
Label Position
Place the label and description on either the right (default) or left.
Disabled
Non-interactive switches in both the off and on states.
Loading
Skeleton placeholders shown while switch state is 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
Surface
Declares an "on-color" tone for a colored or dark region so every nested button-family component automatically switches to high-contrast, surface-adaptive styling — set the surface once, no prop-drilling.
Table
A complete primitive set for tabular data — header, body, footer, sortable columns, sticky header, row states, plus cell helpers for avatars, status, currency amounts, and actions. Designed in the Wise / PrimeReact tradition.