> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/segmented.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Segmented

Switch between related options.

## Basic usage


DailyWeeklyMonthly

Current view: Weekly

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/segmented/basic.tsx"
import { Segmented, Space, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function SegmentedBasic() {
  const [value, setValue] = useState('Weekly');
  return (
    <Space direction="vertical" align="stretch">
      <Segmented options={['Daily', 'Weekly', 'Monthly']} value={value} onChange={setValue} />
      <output>
        <Text tone="muted">Current view: {value}</Text>
      </output>
    </Space>
  );
}
```

Expand code

## More examples


Fill container

ListGridArchive (unavailable

Small size

ABC

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/segmented/advanced.tsx"
import { Segmented, Space, Text } from '@ifhover/leaf-ui';

export function SegmentedOptions() {
  return (
    <Space direction="vertical" align="stretch">
      <Text tone="muted">Fill container</Text>
      <Segmented
        block
        options={[
          { value: 'list', label: 'List' },
          { value: 'grid', label: 'Grid' },
          { value: 'archived', label: 'Archive (unavailable', disabled: true },
        ]}
      />
      <Text tone="muted">Small size</Text>
      <Segmented size="sm" options={['A', 'B', 'C']} />
    </Space>
  );
}
```

Expand code

## Usage

The default width follows the content; block fills the container. options accepts strings or labeled options with icons. Control selection with value / onChange and switch options using arrow keys. Set name to include the value in native form submissions.

## Types

Import these types for data, callbacks and refs.

```ts
import type { SegmentedOption, SegmentedProps } from '@ifhover/leaf-ui';
```

## SegmentedOption API

| Property   | Type        | Default  | Description          |
| ---------- | ----------- | -------- | -------------------- |
| `value`    | `string`    | Required | Controlled value     |
| `label`    | `ReactNode` | Required | Display label        |
| `icon`     | `ReactNode` | —        | Custom icon          |
| `disabled` | `boolean`   | —        | Disable interactions |

## SegmentedProps API

| Property       | Type                                                             | Default  | Description                                         |
| -------------- | ---------------------------------------------------------------- | -------- | --------------------------------------------------- |
| `options`      | [`readonly (string \| SegmentedOption)[]`](#segmentedoption-api) | Required | Available options                                   |
| `value`        | `string`                                                         | —        | Controlled value                                    |
| `defaultValue` | `string`                                                         | —        | Initial value, restored by uncontrolled form resets |
| `onChange`     | `(value: string) => void`                                        | —        | Value change callback                               |
| `disabled`     | `boolean`                                                        | —        | Disable interactions                                |
| `size`         | `'sm' \| 'md' \| 'lg'`                                           | `'md'`   | Size or spacing preset                              |
| `block`        | `boolean`                                                        | `false`  | Fill container width                                |
| `name`         | `string`                                                         | —        | Form field name                                     |
| `form`         | `string`                                                         | —        | Associated form ID                                  |