uix-uiSegmented control
Exclusive option switcher. 3 lengths × 2 sizes.
import * as React from "react";
import { Segmented } from "@/components/ui/segmented";
export default function Example() {
const [v, setV] = React.useState("month");
return (
<Segmented
aria-label="Billing"
value={v}
onValueChange={setV}
options={[{ value: "week", label: "Weekly" }, { value: "month", label: "Monthly" }, { value: "year", label: "Yearly" }]}
/>
);
}
Installation
$ npx uix-ui@latest add segmentedThis copies the file into components/ui/segmented.tsx in your project. npx shadcn@latest add @uix/segmented works too.
Usage
import { Segmented } from "@/components/ui/segmented";
<div style={{ display: "grid", gap: 16, justifyItems: "start" }}>
<Segmented size="sm" aria-label="Small" defaultValue="tin" options={[{ value: "tin", label: "Tin" }, { value: "bag", label: "Bag" }]} />
<Segmented size="md" aria-label="Medium" defaultValue="bag" options={[{ value: "tin", label: "Tin" }, { value: "bag", label: "Bag" }, { value: "box", label: "Box", disabled: true }]} />
</div>
Examples
Sizes and a disabled option
import { Segmented } from "@/components/ui/segmented";
export default function Example() {
return (
<div style={{ display: "grid", gap: 16, justifyItems: "start" }}>
<Segmented size="sm" aria-label="Small" defaultValue="tin" options={[{ value: "tin", label: "Tin" }, { value: "bag", label: "Bag" }]} />
<Segmented size="md" aria-label="Medium" defaultValue="bag" options={[{ value: "tin", label: "Tin" }, { value: "bag", label: "Bag" }, { value: "box", label: "Box", disabled: true }]} />
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | sm | md | "md" | |
options | SegmentedOption[] | – | |
value | string | – | Selected value (controlled). |
defaultValue | string | – | |
onValueChange | (value: string) => void | – | |
name | string | – | Shared name of the radio inputs (defaults to a generated id). |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts