npm i @velkin/react
import { VuTab } from "@velkin/react/tab";Tables match the member selected under Import.
| Prop | Type | Default | Description |
|---|---|---|---|
| states | VuTabStateItem[] | [] | Segment list when the default slot is empty. Default: `[]`. |
| value | undefined | string | undefined | Selected segment when controlled; omit for uncontrolled mode. |
| defaultValue | string | "" | Initial selection when uncontrolled. Default: `""`. |
| disabled | boolean | false | Disables every segment. Default: `false`. |
| label | string | "" | Accessible name when no visible group label exists. Default: `""`. |
| size | VuTabSize | "sm" | Padding/type preset; `sm`|`md`|`lg` align with list/tree, `xs`/`xl` are density extras. Default: `"sm"`. |
| orientation | VuTabOrientation | "horizontal" | Horizontal row or vertical stack. Default: `"horizontal"`. |
| stretch | boolean | false | Fills container width; horizontal segments share space equally. Default: `false`. |
| gap | string | "" | Spacing between segments; empty for flush layout. Default: `""`. |
| radius | VuTabRadius | "full" | Corner preset (`none`/`sm`/`md`/`lg`/`full`). Default: `"full"`. |
| showCurrentLabelOnly | boolean | false | Hides inactive labels. Default: `false`. |
| iconOnly | boolean | false | Square 1:1 segments; labels stay for a11y only. Default: `false`. |
| color | VuTabColor | "primary" | Thumb intent token; per-item color overrides. Default: `"primary"`. |
| Event | Detail | Description |
|---|---|---|
| vu-change | VuTabChangeDetail | User-driven selection changes only. |
| Slot | Description |
|---|---|
| — | - `<vu-tab-item>` segments; when assigned, replaces the `states` prop. |
| Part | Description |
|---|---|
| wrap | Outer radiogroup wrapper. |
| indicator | Sliding highlight behind the active segment. |
| thumb | Alias for the sliding indicator. |
| base | Each segment button in prop mode. |
| base--selected | Currently selected segment button. |
| label | Optional label span inside each button. |
| icon | Optional icon inside each button. |
| Method | Description |
|---|---|
| focusSegment | - Focuses the currently selected segment. |
| reset | - Restores uncontrolled selection from `defaultValue`. |
| Name | Definition |
|---|---|
| string | undefined | |
| VuTabChangeDetail | |
| VuTabColor | |
| VuTabOrientation | |
| VuTabRadius | |
| VuTabSize | |