Switch

A toggle switch for boolean values, rendered as an accessible button with role="switch".

Installation

npx @obi/ui add switch

Preview

Email notifications

Receive updates about your account.

Dark mode

Analytics

Usage

'use client';

import { useState } from 'react';
import Switch from '@/src/components/Switch/Switch';

export default function Example() {
  const [enabled, setEnabled] = useState(false);

  return (
    <div className="flex flex-col gap-4">
      <Switch
        checked={enabled}
        onCheckedChange={setEnabled}
        label="Email notifications"
        hint="Receive updates about your account activity."
      />
      <Switch checked={true} onCheckedChange={() => {}} label="Always on" />
      <Switch checked={false} onCheckedChange={() => {}} label="Disabled" disabled />
    </div>
  );
}

Props

Name	Type	Default	Description
checked	boolean	—	Controlled checked state.
onCheckedChange	(checked: boolean) => void	—	Callback fired when the switch is toggled.
label	string	—	Visible label rendered beside the switch.
hint	string	—	Helper text rendered below the label.
disabled	boolean	false	Disables the switch.
id	string	auto	HTML id for the switch button; auto-derived from label if omitted.