Switch

iOS-style on/off toggle. Controlled or uncontrolled, built on Radix.

Examples

Default — label on the left of the toggle

Reading order: label → toggle. Matches the settings-list pattern of iOS/Android/Material.

Email notifications

Get notified about new replies.

import { useState } from 'react';
import { Switch } from '@kactostecnologia/benix-ds';

export default function NotificationsForm() {
  const [notif, setNotif] = useState(true);

  return (
    <Switch
      label="Email notifications"
      description="Get notified about new replies."
      checked={notif}
      onCheckedChange={setNotif}
    />
  );
}

labelPosition='left' — toggle first

Reading order: toggle → label. Use for compact, checkbox-like inline options.

Send me marketing emails

import { useState } from 'react';
import { Switch } from '@kactostecnologia/benix-ds';

export default function MarketingOptIn() {
  const [marketing, setMarketing] = useState(false);

  return (
    <Switch
      label="Send me marketing emails"
      labelPosition="left"
      checked={marketing}
      onCheckedChange={setMarketing}
    />
  );
}

Bare (no label)

Wrap in your own row container for a custom layout like 'space-between'.

import { useState } from 'react';
import { Switch } from '@kactostecnologia/benix-ds';

export default function ToggleExample() {
  const [on, setOn] = useState(true);

  return (
    <div className="flex items-center gap-4">
      <Switch checked={on} onCheckedChange={setOn} />
      <span className="text-sm text-muted-foreground">{on ? 'On' : 'Off'}</span>
    </div>
  );
}

Disabled states

Off & disabled

On & disabled

import { Switch } from '@kactostecnologia/benix-ds';

export default function DisabledExample() {
  return (
    <div className="flex flex-col gap-3">
      <Switch label="Off & disabled" disabled />
      <Switch label="On & disabled" checked disabled />
    </div>
  );
}

API Reference

Props of the Switch component.

Prop	Type	Default	Description
`checked`	`boolean`	—	—
`defaultChecked`	`boolean`	—	—
`onCheckedChange`	`(checked: boolean) => void`	—	—
`label`	`string`	—	Renders the label inline next to the switch.
`description`	`ReactNode`	—	Helper text below the label.
`labelPosition`	`'left' \| 'right'`	`'right'`	'right' = label LEFT of the toggle (settings-list standard). 'left' = toggle LEFT of the label.
`disabled`	`boolean`	`false`	—