@metadiv-studio/switch

A modern, accessible switch component built with React, Radix UI, and Tailwind CSS. This package provides a customizable toggle switch component that follows accessibility best practices and supports both light and dark themes.

Installation

npm install @metadiv-studio/switch

Description

The @metadiv-studio/switch package exports a Switch component that:

• Built on Radix UI: Leverages @radix-ui/react-switch for accessibility and functionality
• Tailwind CSS Styled: Pre-styled with Tailwind CSS classes for consistent design
• Theme Support: Includes built-in light and dark theme support
• Customizable: Easy to customize with additional CSS classes
• TypeScript Ready: Full TypeScript support with proper type definitions
• Accessible: Follows ARIA guidelines and keyboard navigation standards

Usage

Basic Import

import { Switch } from '@metadiv-studio/switch';

Basic Switch

import { Switch } from '@metadiv-studio/switch';

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

  return (
    <Switch
      checked={isEnabled}
      onCheckedChange={setIsEnabled}
    />
  );
}

Switch with Label

function SwitchWithLabel() {
  const [airplaneMode, setAirplaneMode] = useState(false);

  return (
    <div className="flex items-center space-x-4">
      <Switch
        id="airplane-mode"
        checked={airplaneMode}
        onCheckedChange={setAirplaneMode}
      />
      <label 
        htmlFor="airplane-mode" 
        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      >
        Airplane mode
      </label>
    </div>
  );
}

Controlled Switch

function ControlledSwitch() {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => setIsOn(!isOn);

  return (
    <div className="flex items-center space-x-4">
      <Switch
        checked={isOn}
        onCheckedChange={setIsOn}
      />
      <span className="text-sm text-gray-600 dark:text-gray-400">
        {isOn ? 'ON' : 'OFF'}
      </span>
      <button onClick={toggleSwitch}>
        Toggle
      </button>
    </div>
  );
}

Disabled Switch

function DisabledSwitch() {
  return (
    <div className="space-y-4">
      <div className="flex items-center space-x-4">
        <Switch disabled />
        <span className="text-sm text-gray-400">Disabled (unchecked)</span>
      </div>
      <div className="flex items-center space-x-4">
        <Switch disabled defaultChecked />
        <span className="text-sm text-gray-400">Disabled (checked)</span>
      </div>
    </div>
  );
}

Custom Styling

function CustomStyledSwitch() {
  return (
    <div className="space-y-4">
      {/* Green when checked */}
      <div className="flex items-center space-x-4">
        <Switch
          className="data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-gray-300"
        />
        <span className="text-sm">Green when checked</span>
      </div>
      
      {/* Larger purple switch */}
      <div className="flex items-center space-x-4">
        <Switch
          className="data-[state=checked]:bg-purple-500 data-[state=unchecked]:bg-gray-300 h-7 w-12"
        />
        <span className="text-sm">Larger purple switch</span>
      </div>
    </div>
  );
}

Props

The Switch component accepts all standard props from @radix-ui/react-switch:

• checked: Controls the checked state of the switch
• defaultChecked: Sets the default checked state
• onCheckedChange: Callback fired when the switch state changes
• disabled: Disables the switch
• required: Makes the switch required for form submission
• name: Name attribute for form submission
• value: Value attribute for form submission

Styling

The component comes with default Tailwind CSS styling that can be customized:

• Default size: h-4 w-8 (16px × 32px)
• Thumb size: h-4 w-4 (16px × 16px)
• Colors: Uses CSS custom properties for theming
• Transitions: Smooth animations for state changes
• Thumb styling: Subtle border with ring-1 ring-gray-800/10

Custom CSS Classes

You can override styles using the className prop:

<Switch 
  className="data-[state=checked]:bg-blue-500 data-[state=unchecked]:bg-gray-200 h-6 w-11"
/>

Dependencies

• React 18+
• @radix-ui/react-switch
• Tailwind CSS (for styling)

License

UNLICENSED

Contributing

This package is part of the Metadiv Studio UI component library. For contributions, please refer to the main repository guidelines.