Switch

PreviousNext

A toggle switch component for binary on/off states with accessible keyboard support and animated transitions

Enable notifications
'use client';

import { useState } from 'react';
import { Switch } from '@/ui/forms/Switch';

export function SwitchDemo() {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <div className="flex items-center gap-3">
      <Switch checked={isEnabled} onClick={() => setIsEnabled(!isEnabled)} />
      <span className="text-b2 font-semibold">Enable notifications</span>
    </div>
  );
}

Installation

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/switch.json

Usage

'use client';
 
import { useState } from 'react';
import { Switch } from '@/docs/lib/ui/forms/switch';
 
export function Component() {
  const [isEnabled, setIsEnabled] = useState(false);
 
  return (
    <div className="flex items-center gap-3">
      <Switch
        checked={isEnabled}
        onClick={() => setIsEnabled(!isEnabled)}
        color="saffron"
      />
      <span>Enable notifications</span>
    </div>
  );
}

API Reference

Switch

PropTypeDefaultDescription
checkedbooleanundefinedThe controlled checked state of the switch
onClickMouseEventHandler<HTMLButtonElement>undefinedClick handler called when switch is clicked (not called when disabled)
colorColors'saffron'Color theme for the switch when checked. Valid values: saffron, black, darkGrey, green, lavender, lightGrey, lightSand, marygold, orange, red, sand, sienna, ultramarine, verdigris, wave, white, current
disabledbooleanfalseWhen true, disables the switch and prevents interaction
classNamestringundefinedCustom CSS classes applied to the button element

The component also supports all standard button attributes via ComponentPropsWithoutRef<'button'>.

Notes

  • Button-based component: The Switch is implemented as a <button> element with role="switch" for proper accessibility
  • No label text support: The Switch does not render children. Wrap it in an external container with label text if needed (see Usage example above)
  • Controlled component: The checked prop determines the switch state - toggle it in your onClick handler
  • Disabled state: When disabled, the onClick handler is not called, preventing interaction
  • Background colors:
    • Unchecked: bg-middleGrey
    • Checked: Uses the color prop (e.g., bg-saffron, bg-green)
  • Fixed size: min-w-56 (56px min-width) with p-4 padding (4px) - size is not customizable
  • Visual structure: Displays an SVG icon containing:
    • White circle (24px diameter)
    • Grey center dot (middleGrey, 4px radius)
    • Checkmark path (visible in both states)
  • Accessibility:
    • Uses role="switch" for proper ARIA semantics
    • Sets aria-checked attribute to indicate state to assistive technologies
    • Supports keyboard navigation (space/enter to activate)
  • Data attributes: Sets data-name="Switch" for testing and debugging
  • Client component: Requires 'use client' directive when used in React Server Components