Switch

Switch is a toggle control for binary on/off states.

Switches provide a clear visual representation of binary choices, such as enabling or disabling features, turning settings on or off, or controlling boolean states. Unlike checkboxes which are typically used in forms for data submission, switches represent immediate state changes that take effect as soon as they're toggled. They provide clear visual feedback through their sliding animation, making the current state and the action of changing it immediately apparent to users.

Use switches for settings and preferences where the change takes effect immediately without requiring a save action. They work well in settings panels, preference screens, or anywhere users need to quickly toggle features on or off. Switches should always be paired with labels that clearly describe what is being turned on or off, and the current state should be visually obvious even without reading the label.

Example

Installation


npm install @strongtie/design-system

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

Props

All components accept standard HTML attributes and React 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.

Classes

CSS classes used by this component:

switch

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Slider Tab Nav

On This Page

Example Installation Props Examples With Label Styling Classes Accessibility

Contribute