---
title: "Switch"
description: "An on/off setting that applies at once, with an optional label and description. Use Checkbox for a choice saved with a form."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Switch

## Labelled

```tsx
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.

```tsx
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

```tsx
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`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/switch/switch.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/forms/switch/index.mdx