Switch

A control that allows users to toggle between two states: on and off.

Usage

import { Switch } from "@rhinolabs/ui"
import { Label } from "@rhinolabs/ui"

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

Examples

Basic Switch

A simple toggle switch with label.

<div className="flex items-center space-x-2">
  <Switch id="notifications" />
  <Label htmlFor="notifications">Enable notifications</Label>
</div>

With Form

Switch used in a form context.

<form>
  <div className="space-y-4">
    <div className="flex items-center space-x-2">
      <Switch id="emails" defaultChecked />
      <Label htmlFor="emails">Email notifications</Label>
    </div>
    <div className="flex items-center space-x-2">
      <Switch id="marketing" />
      <Label htmlFor="marketing">Marketing emails</Label>
    </div>
    <div className="flex items-center space-x-2">
      <Switch id="offers" disabled />
      <Label htmlFor="offers" className="text-muted-foreground">
        Special offers (disabled)
      </Label>
    </div>
  </div>
</form>

With Description

Switch with additional description text.

<div className="grid gap-1.5">
  <div className="flex items-center space-x-2">
    <Switch id="theme" />
    <Label htmlFor="theme">Dark Mode</Label>
  </div>
  <p className="text-sm text-muted-foreground pl-[36px]">
    Turn on dark mode to reduce eye strain in low light conditions.
  </p>
</div>

Props

Prop	Type	Description
checked	boolean	The controlled checked state
defaultChecked	boolean	The default checked state
onCheckedChange	(checked: boolean) => void	Change handler
disabled	boolean	Whether the switch is disabled

The Switch component also accepts all HTML button attributes.

Design Considerations

• Use clear labels
• Provide visual feedback
• Consider mobile touch targets
• Show state changes clearly
• Handle disabled states

Accessibility

• Supports keyboard navigation
• Maintains focus states
• Provides ARIA labels
• Announces state changes
• Uses semantic markup