# antuikit / Segmented

> Segmented with concentric item corners at any theme radius, and option tooltips in the kit's small bubble.

Docs: https://antuikit.com/docs/components/segmented

## Install

npx antuikit@latest init
npx antuikit@latest add segmented

## Import

import { Segmented } from "@/components/ui/segmented";

## Demos

- [Basic](https://ui.antuikit.com/embed/segmented/basic.md): Pass `options` as strings, or as objects when one option needs more, like `disabled` on the Gantt view.
- [Controlled](https://ui.antuikit.com/embed/segmented/controlled.md): Pass `value` and `onChange` to keep the selection in your own state, so other controls like the Next view button can change it.
- [Size](https://ui.antuikit.com/embed/segmented/sizes.md): Set `size` to `small` or `large` beside the default `medium`, and the item corners stay concentric with the track.
- [Shape](https://ui.antuikit.com/embed/segmented/shape.md): Set `shape` to `round` to draw the track and the selected item as pills instead of rounded rectangles.
- [Block](https://ui.antuikit.com/embed/segmented/block.md): Set `block` to stretch the track across its parent and share the width equally between the options.
- [Icons](https://ui.antuikit.com/embed/segmented/icons.md): Give an option an `icon` to show it before the label, like a check for passing builds and a cross for failing ones.
- [Icon-only options](https://ui.antuikit.com/embed/segmented/icon-only.md): Leave `label` out and put an icon with a hidden word in `icon`, plus a `tooltip`, for options that show only a glyph.
- [Rich labels](https://ui.antuikit.com/embed/segmented/rich-labels.md): Pass `label` any node, so an option can carry a count, a `Badge`, a `Tag`, an avatar or a hint on a disabled option.
- [Stacked labels](https://ui.antuikit.com/embed/segmented/stacked-labels.md): Put an icon over a word in `label` for a taller option, with the icon taking a color when its option is selected.
- [Week strip](https://ui.antuikit.com/embed/segmented/week-strip.md): A strip of days built from two-line labels on a track with no background, with the weekend set to `disabled`.
- [Overflow menu](https://ui.antuikit.com/embed/segmented/overflow-menu.md): Put a `Dropdown` in the last option's `label` to keep a few views as options and move the rest into a menu.
- [Vertical](https://ui.antuikit.com/embed/segmented/vertical.md): Set `orientation="vertical"` to stack the options, with labels or icons alone, for a side menu or a narrow toolbar.
- [Custom thumb](https://ui.antuikit.com/embed/segmented/restyle-thumb.md): Style the selected item and the sliding thumb together with `className`, like a raised thumb or a flat gray one.
- [Custom track](https://ui.antuikit.com/embed/segmented/restyle-track.md): Pass `classNames.root` and `classNames.item` to repaint the track, like a dark track with light text or a purple pill.
- [Dynamic options](https://ui.antuikit.com/embed/segmented/dynamic-options.md): `options` can change like any prop, and the track measures itself again and moves the thumb when you add options.
- [Radio group name](https://ui.antuikit.com/embed/segmented/radio-group-name.md): Set `name` to choose the name of the radio group the options form, which is generated for you when you leave it out.
- [View switcher](https://ui.antuikit.com/embed/segmented/view-switcher.md): A `Segmented` in a list header that switches the same projects between a table and a grid of cards.
- [Inbox filter](https://ui.antuikit.com/embed/segmented/inbox-filter.md): An inbox filtered by a `Segmented` with a count in each option, worked out from the same rule that filters the list.
- [Billing cycle](https://ui.antuikit.com/embed/segmented/billing-cycle.md): A pricing toggle between monthly and yearly billing, with the yearly saving shown as a `Tag` inside its option.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/segmented`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Segmented` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.