---
title: Segmented Control
description: A linear set of two or more segments, each of which functions as a radio input, and a default value is required.

link:
  docs: https://kobalte.dev/docs/core/components/segmented-control
  api: https://kobalte.dev/docs/core/components/segmented-control#api-reference
---

<ComponentPreview name="segmented-control-demo">

```tsx file=<rootDir>/apps/docs/src/registry/examples/segmented-control-demo.tsx

```

</ComponentPreview>

## Installation

<ComponentInstallation>

  <Step>
    <StepItem>Install the following dependencies:</StepItem>

    ```bash
    npm install @kobalte/core
    ```

    <StepItem>Copy and paste the following code into your project:</StepItem>

    <ComponentSourceTabs>

    ```tsx title="components/ui/segmented-control" file=<rootDir>/apps/docs/src/registry/ui/segmented-control.tsx

    ```

    ```tsx title="components/ui/segmented-control" file=<rootDir>/apps/unocss-playground/src/registry/ui/segmented-control.tsx

    ```

  </ComponentSourceTabs>

  </Step>

</ComponentInstallation>

## Usage

```tsx
import {
  SegmentedControl,
  SegmentedControlIndicator,
  SegmentedControlItem,
  SegmentedControlItemInput,
  SegmentedControlItemLabel,
  SegmentedControlItems,
  SegmentedControlList,
} from "@components/ui/segmented-control"
```

```tsx
<SegmentedControl>
  <SegmentedControlList>
    <SegmentedControlIndicator />
    <SegmentedControlItems>
      <SegmentedControlItem>
        <SegmentedControlItemInput />
        <SegmentedControlItemLabel />
      </SegmentedControlItem>
    </SegmentedControlItems>
  </SegmentedControlList>
</SegmentedControl>
```

## Examples

### Orientation

The segmented control `orientation` prop can be used to change the segmented control's orientation.

<ComponentPreview name="segmented-control-orientation-demo">

```tsx file=<rootDir>/apps/docs/src/registry/examples/segmented-control-orientation-demo.tsx

```

</ComponentPreview>
