Skip to content

Segmented

Base UI

Ruled buttons for choosing one option from a few.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/segmented.json

Also installs @base-ui/react.

Usage

import { Segmented } from "@/components/spotcheck/segmented"

<Segmented label="Range" options={["Day", "Week", "Month"]} value={range} onValueChange={setRange} />

One option always stays selected, so pressing the current one does nothing.

Props

  • label * RequiredstringDefault —Names the group for screen readers.
  • options * Requiredstring[]Default —
  • valuestringDefault —The selected option, when you control it.
  • defaultValuestringDefault —The starting option, when it manages itself.
  • onValueChange(value: string) => voidDefault —
  • classNamestringDefault —

Keyboard

← →Move between options
SpaceChoose the focused option

Reduced motion

Nothing here animates.