---
title: "Settings"
description: "Settings pages: SettingGroup frames related settings as one card, SettingRow pairs a setting’s name and explanation with its control, and SettingToggle is an on/off setting whose whole row toggles."
---

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

# Settings

## Agent settings

```tsx
import { useState } from 'react';
import { Button, SettingGroup, SettingToggle } from '@arbol-ai/ui';

const AgentSettings = () => {
  const [endOnSilence, setEndOnSilence] = useState(true);
  return (
    <SettingGroup
      action={
        <Button size="sm" variant="outline">
          Reset
        </Button>
      }
      description="How the front desk agent behaves on a call."
      title="Conversation"
    >
      <SettingToggle
        description="The agent hangs up after 30 seconds of silence."
        isSelected={endOnSilence}
        label="End silent calls"
        onChange={setEndOnSilence}
      />
      <SettingToggle
        defaultSelected
        description="Callers can talk over the agent to change the subject."
        help="The agent stops speaking as soon as it hears the caller, and answers what they said."
        label="Allow interruptions"
      />
      <SettingToggle isDisabled label="Record calls" />
    </SettingGroup>
  );
};

<AgentSettings />
```

## Control under the label

Stacked for wide controls; responsive stacks only on phones.

```tsx
import { Button, SettingGroup, SettingRow } from '@arbol-ai/ui';

<SettingGroup title="Calls">
  <SettingRow
    description="Calls end by themselves after this long."
    hint="Applies to new calls."
    label="Call limit"
    layout="stacked"
  >
    <input
      aria-label="Call limit in minutes"
      className="rounded-field bg-gray-a2 h-8 w-full border px-3 text-sm"
      defaultValue={15}
      type="number"
    />
  </SettingRow>
  <SettingRow
    description="Who answers when the agent hands over."
    label="Handoff"
    layout="responsive"
  >
    <Button size="sm" variant="outline">
      Choose people
    </Button>
  </SettingRow>
</SettingGroup>
```

## Source

The examples above are [`src/components/settings/settings.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/settings/settings.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/layout/settings/index.mdx