Switch

A control that toggles between on and off.

Default

The change takes effect immediately. Connect a visible Label with htmlFor and id.

Record calls

Sizes

The default is 55×26. sm is the same recipe at 20px tall, for tables and dense lists.

Detect voicemail

import { Label, Switch } from "@smallest-inc/ui";

export default function SwitchSizes() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-3">
        <Switch id="voicemail-sm" size="sm" defaultChecked />
        <Label htmlFor="voicemail-sm">Detect voicemail</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch id="voicemail-default" defaultChecked />
        <Label htmlFor="voicemail-default">Detect voicemail</Label>
      </div>
    </div>
  );
}

With description

In settings rows, put the name and its consequence on the left and the switch on the right.

Allow interruptions

The agent stops speaking as soon as the caller talks.

import { Label, Switch } from "@smallest-inc/ui";

export default function SwitchWithDescription() {
  return (
    <div className="flex w-full max-w-sm items-start justify-between gap-6">
      <div className="flex flex-col gap-1">
        <Label htmlFor="barge-in">Allow interruptions</Label>
        <p id="barge-in-description" className="text-sm text-fg-secondary">
          The agent stops speaking as soon as the caller talks.
        </p>
      </div>
      <Switch id="barge-in" aria-describedby="barge-in-description" defaultChecked />
    </div>
  );
}

Disabled

Outbound calls

Inbound calls

import { Label, Switch } from "@smallest-inc/ui";

export default function SwitchDisabled() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-3">
        <Switch id="outbound-disabled" disabled />
        <Label htmlFor="outbound-disabled">Outbound calls</Label>
      </div>
      <div className="flex items-center gap-3">
        <Switch id="inbound-disabled" disabled defaultChecked />
        <Label htmlFor="inbound-disabled">Inbound calls</Label>
      </div>
    </div>
  );
}

Best practices

When to use

Use for a single setting that takes effect immediately when turned on or off, such as “Record calls”.
Use Checkbox for additive selection or anything confirmed with a Save button, and Radio for a choice among several states.

Behavior

Do not pair a switch with a separate Save action; the change applies as soon as it is toggled.
Use the default size (55×26) in forms and settings. Use size="sm" (20px tall) in tables and dense lists.
In settings rows, put the name and its consequence on the left and the switch on the right.

Content

Name the setting, not the action: “Allow interruptions”, not “Turn on interruptions”.

Accessibility

Connect a visible Label with htmlFor and id, and point aria-describedby at any description.

PreviousStepper NextTable