🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Switch

A toggle control that represents an on/off state.

Switches are used to immediately toggle a single setting on or off. Unlike checkboxes, which are typically used in forms that require submission, switches provide instant feedback and apply changes immediately. They're commonly used for settings like enabling/disabling features, turning notifications on/off, or toggling visibility.

Built on top of Radix UI's Switch primitive with full keyboard navigation (Space to toggle), focus management, and accessibility support including proper ARIA attributes and roles.

Example

Installation


npm install @strongtie/design-system

import { Switch } from "@strongtie/design-system/switch"

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Examples

With Label

Airplane Mode

"use client"

import { Label } from "@strongtie/design-system/label"
import { Switch } from "@strongtie/design-system/switch"

export function SwitchWithLabel() {
  return (
    <div className="flex items-center gap-1 space-x-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Additional Classes

Other CSS classes used by this component:

switch
switch-thumb

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI switch Documentation

Slider Tab Nav

On This Page

Example Installation Props Examples With Label Styling Additional Classes Accessibility Resources

Contribute