Atelier UI

Search components…

Search components…

Segmented Control

Segmented radio group with a sliding thumb, arrow keys, optional icons and two sizes.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

SegmentedControlProps

Also accepts all props of Omit<React.ComponentProps<"div">, "children" | "defaultValue" | "onChange">

PropTypeDefaultDescription
options* requiredSegmentedOption[]——
valuestring——
defaultValuestring——
onValueChange(value: string) => void——
size"sm" | "md""md"—
fullWidthbooleanfalse—

Install

$ npx shadcn@latest add https://chromotion.dev/r/segmented-control.json

More like this