Switch | Arbol UI

Language

Appearance

Labelled

Answer automaticallyThe agent answers outside office hours.

import { useState } from 'react';
import { Switch } from '@arbol-ai/ui';

const AutoReplyExample = () => {
  const [isSelected, setIsSelected] = useState(true);
  return (
    <Switch
      description="The agent answers outside office hours."
      isSelected={isSelected}
      onChange={setIsSelected}
    >
      Answer automatically
    </Switch>
  );
};

<AutoReplyExample />

Without a visible label

In a table row, the switch is named with aria-label.

October reminders

import { Switch } from '@arbol-ai/ui';

<div className="rounded-card flex items-center justify-between gap-4 border px-4 py-3 text-sm">
  <span>October reminders</span>
  <Switch aria-label="October reminders active" defaultSelected />
</div>

Disabled

Record callsYour plan does not include call recording.

import { Switch } from '@arbol-ai/ui';

<Switch description="Your plan does not include call recording." isDisabled>
  Record calls
</Switch>

Source

The examples above are src/components/switch/switch.examples.tsx, which the library’s tests render too.