---
title: "Segmented control"
description: "One of 2–4 mutually exclusive options side by side, as a radio group: arrow keys move the choice and the thumb slides to it. Use Tabs to switch what a page shows."
---

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

# Segmented control

## Sizes

md for forms and settings; sm (28px) for toolbars.

```tsx
import { useState } from 'react';
import { SegmentedControl } from '@arbol-ai/ui';

const SizesExample = () => {
  const [mode, setMode] = useState<'sequential' | 'parallel'>('sequential');
  const [view, setView] = useState<'day' | 'week' | 'month'>('week');
  return (
    <div className="flex flex-col items-start gap-4">
      <SegmentedControl
        label="Backup calls"
        onChange={setMode}
        options={[
          { label: 'One after another', value: 'sequential' },
          { label: 'All at once', value: 'parallel' },
        ]}
        value={mode}
      />
      <SegmentedControl
        label="Agenda view"
        onChange={setView}
        options={[
          { label: 'Day', value: 'day' },
          { label: 'Week', value: 'week' },
          { label: 'Month', value: 'month' },
        ]}
        size="sm"
        value={view}
      />
    </div>
  );
};

<SizesExample />
```

## Disabled

```tsx
import { SegmentedControl } from '@arbol-ai/ui';

<SegmentedControl
  defaultValue="balanced"
  isDisabled
  label="Reasoning effort"
  options={[
    { label: 'Fast', value: 'fast' },
    { label: 'Balanced', value: 'balanced' },
    { label: 'Thorough', value: 'thorough' },
  ]}
/>
```

## Source

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

Source: https://epidermis.getarbol.com/components/forms/segmented-control/index.mdx