Segmented Control
Row of icon-or-label buttons that share a single border. The active background slides between segments on selection. Sized sm/md/lg to match the row baseline.
Icons · sm
Icons · lg
Labels
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/andromeda-segmented-controlProps
Every prop this component accepts. Any other prop is forwarded to the underlying element.
SegmentOption
| Prop | Type | Default | Description |
|---|---|---|---|
| valuereq | string | - | Unique value that identifies this segment. |
| label | string | - | Text shown on the segment. |
| icon | React.ComponentType<{ size?: number, weight?: string }> | - | Icon component rendered in the segment, optionally alongside its label. |
| ariaLabel | string | - | Accessible name for the segment, falling back to label when omitted. |
SegmentedControl
| Prop | Type | Default | Description |
|---|---|---|---|
| valuereq | string | - | Value of the currently selected segment. |
| onChangereq | (next: string) => void | - | Handler called with the value of the newly selected segment. |
| optionsreq | SegmentOption[] | - | Segments to render, in display order. |
| size | 'sm'|'md'|'lg' | 'md' | Height and icon-size preset for the control. |
| layoutGroupId | string | - | Override the auto-generated per-instance id only when you explicitly want two SegmentedControls to share their indicator (animating across both as one unit). The default `useId()` value scopes the indicator to a single control, which is what you want 99% of the time, without it, switching selections in one control makes the indicator fly between controls. |
| className | string | - | Extra classes merged onto the root element. |
| style | React.CSSProperties | - | Inline styles merged onto the root element. |
AI Canvas