Segmented Control

A row of options where one is picked, like a view switcher. The highlight slides to the choice.

$ pnpm dlx shadcn@latest add https://dashral.com/r/segmented-control.json

Calendar view

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/segmented-control.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/segmented-control

Usage

example.tsx

1import { SegmentedControl } from "@/components/dashral/segmented-control"
2
3<SegmentedControl
4  aria-label="Calendar view"
5  defaultValue="week"
6  options={[
7    { value: "day", label: "Day" },
8    { value: "week", label: "Week" },
9    { value: "month", label: "Month" },
10  ]}
11/>

Examples

With icons

An option can carry an icon; an icon-only one needs an aria-label.

API reference

SegmentedControl

Also takes every prop of Radix Radio Group(opens in a new tab).

Prop	Type	Default
`value / defaultValue`	`string`	—
`onValueChange`	`(value: string) => void` Called with the new value.	—
`options`	`(string \| { value; label?; icon?; disabled?; "aria-label"? })[]` The segments. An icon-only one needs an aria-label.	—
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`classNames`	`{ root, label, description, error, group, item }` Classes for each part.	—
`aria-label`	`string` Without a label: names the choice, e.g. “Calendar view”.	—

Keyboard

Keys	Action
`Tab`	Move into the control
`←`or`→`	Move and pick

Accessibility

A radio group, so screen readers say “2 of 4, selected”; label names it through aria-labelledby. For switching panels of content, use Tabs.

Motion

The highlight glides to the picked option (--duration-considered, --ease-standard); it just moves with reduced motion.