Tessina UI
Tessina UI
GitHubIntroduction
InstallationUsageTheming
Components
ButtonIconButtonLinkSpinnerBadgeAvatarStatusChipShortcutSkeletonSurfaceProgressMeterRating
LabelFieldFieldsetCheckboxRadioSwitchSliderSelectComboboxSearchTextareaNumberFieldDate PickerTime PickerOTP InputFile UploadCalendar
AlertBannerToastTooltip
TabsAccordionCollapsibleBreadcrumbPaginationStepperSegmentedControlButtonGroupToggleButtonToggleGroupToolbarNavigation MenuMenubarBottom NavSidebar
Split ButtonFABDropdown MenuContextMenuCommandPopoverHoverCard
ContainerStackFlexGridAspectRatioSpacerCardCarouselDividerScroll Area
Table
ChatBubblePromptInputCodeBlock
ModalAlertDialogDrawerAction SheetTop Header MobileTop Header DesktopEmptyStateForm
Contributing
ComponentsForm Blocks

Switch

A toggle control that allows users to turn a setting on or off

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { Switch } from "@tessinaui/ui";
<Switch label="Enable notifications" defaultChecked />

Showcase

All sizes, states, and label combinations:

API Reference

Props

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"Size of the switch
checkedboolean—Controlled checked state
defaultCheckedbooleanfalseUncontrolled default state
onCheckedChange(checked: boolean) => void—Called when checked state changes
disabledbooleanfalseDisables the switch
labelstring—Label text displayed next to the switch
descriptionstring—Supporting description text below the label
labelPosition"left" | "right""right"Side of the switch the label appears on
showIconbooleantrueShow 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

StateDescription
OffDefault unchecked state
OnChecked state with success color and checkmark
Disabled offGreyed out, non-interactive
Disabled onChecked but non-interactive
FocusVisible focus ring for keyboard navigation

Accessibility

The Switch component:

  • Uses Radix UI's Switch primitive for full accessibility
  • Role: switch with aria-checked state
  • Keyboard: Space to toggle, Tab to focus
  • Label is associated via htmlFor / id
  • Includes visible focus-visible ring (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.

On this page

PlaygroundInstallationUsageShowcaseAPI ReferencePropsSizesStatesAccessibility