# Segmented

> Exclusive selector for 2-4 options.

Source: https://ui.jcsoftdev.com/docs/components/segmented

Exclusive selector for 2-4 options. `type="single"` gives Radix the `radiogroup` role.

## Import

```ts
import { Segmented } from "@jcsoftdev/ui/navigation";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/navigation/segmented`.

## Usage

```tsx
export const Default: Story = {};
```

_Source of the Storybook story._

## Props

This component declares no props of its own.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/navigation-segmented--default)
- [Disabled](/storybook/?path=/story/navigation-segmented--disabled)
- [Two Options](/storybook/?path=/story/navigation-segmented--two-options)
- [One Item Disabled](/storybook/?path=/story/navigation-segmented--one-item-disabled)
- [Controlled](/storybook/?path=/story/navigation-segmented--controlled)
- [Narrow](/storybook/?path=/story/navigation-segmented--narrow)

## Source

`packages/ui/src/navigation/segmented/segmented.tsx`