Forms

SegmentedControl

One choice out of two to five, all in view: expense or income, 3M, 6M or 12M. Picking one clears the other, unlike a FilterPill. It is made of native radio inputs, so the arrow keys move between them and it takes one Tab stop. The indicator slides in CSS alone and stays still with reduced motion.

view .md

Installation

terminal

bash

npx @entrepta/cli@latest add segmented-control

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

segmented-control.tsx

tsx

import { SegmentedControl } from "@/components/entrepta/segmented-control"

<SegmentedControl
  aria-label="kind"
  options={[
    { value: "expense", label: "expense" },
    { value: "income", label: "income" },
  ]}
  value={kind}
  onValueChange={setKind}
/>

Props

Prop	Type	Default	Description
options	{ value; label; icon?; disabled? }[]	-	Two to five. More than that wants a Select
value / onValueChange	string / (value: string) => void	-	Controlled. defaultValue for uncontrolled
size	"sm" \| "md"	"md"	28 or 36px tall
aria-label	string	-	The group's name. Or aria-labelledby