Component

Segmented Control

A compact control for switching between a small set of mutually exclusive choices.

Preview

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { SegmentedControl } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/segmented-control.json

Copied source import

code

import "@/styles/axie.css";import { SegmentedControl } from "@/components/axie/segmented-control";

Prefer @axie/segmented-control? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { SegmentedControl } from "axie-ui";<SegmentedControl  ariaLabel="Budget rhythm"  options={[    { label: "Daily", value: "daily" },    { label: "Weekly", value: "weekly" }  ]}  value={value}  onValueChange={setValue}/>

Accessibility

Use segmented controls for small mutually exclusive sets.
Expose the group as radio semantics or tabs depending on whether the control changes a view.
Keep labels short enough to fit without truncation.

API Reference

Prop	Type	Default	Description
ariaLabel	string	-	Accessible label for the group.
options	SegmentedControlOption[]	-	Option list rendered as radio-like buttons.
value	string	-	Selected option value.
onValueChange	(value: string) => void	-	Called when a segment is selected.