SegmentedControl

Two to five mutually exclusive views in a trough with a sliding thumb — Month · Week · Timeline · Agenda, Both · Payable · Receivable. The labels stay put and the thumb moves. Arrow keys move the choice and wrap.

import { SegmentedControl } from "@puckoops/camelot";
NameDescriptionDefaultControl
options*
SegmentOption<T>[]		-
aria-label*
string		-
value
T		--
defaultValue
T		-
onValueChange
(value: T) => void		--
size
30px or the 36px control height
"sm""md"		"md"
size
className
string		-

When to use

Use SegmentedControl to switch views or a direction filter (Both · Payable · Receivable) without leaving the page.

  • Use Tabs instead when each option is a distinct section with its own content below.
  • Use ChoiceGroup instead when the options are form values rather than views.

Examples

Small

30px, for a topbar or a card header.

Direction

A direction filter over the same list of obligations.

Controlled

Controlled by state, as when the view lives in the URL.

Showing the timeline view

All Variants

Both sizes and a three-way appearance switch.