Ravox KitForms
Segmented Control
For switching between a few options, like 7d / 30d / 90d. As buttons, it is a radio group with arrow-key navigation; as links (asChild), it becomes navigation with aria-current. The active marker slides.
Settings
Installation
The command creates components/ui/segmented-control.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add segmented-controlProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onValueChange | string / (value: string) => void | — | Controlled mode (SegmentedControl). With links, the value comes from the URL. |
| defaultValue | string | — | Active at the start, uncontrolled mode (SegmentedControl). |
| navigation | boolean | false | The segments are links: it becomes a <nav> and the active one gets aria-current="page" (SegmentedControl). |
| size | "sm" | "md" | "md" | Height: 28 or 36px (SegmentedControl). |
| activeLabel | boolean | false | Icon-only items: the label (children) opens with an animated width only on the active item and stays accessible on the others (SegmentedControl). |
| icon | ReactNode | — | The icon that is always visible with activeLabel (SegmentedControlItem). |
| value | string | — | Identifies the segment (SegmentedControlItem). |
| asChild | boolean | false | Passes the styling to the child, like Next's <Link>, instead of creating a button (SegmentedControlItem). |