Segmented control
Two to four modes with one immediate selection.
Usage
import { SegmentedControl } from '@commenda/pathfinder/segmented-control';
<SegmentedControl
label="Billing interval"
value={interval}
onValueChange={setInterval}
options={[
{ value: 'monthly', label: 'Monthly' },
{ value: 'quarterly', label: 'Quarterly' },
{ value: 'annual', label: 'Annual' },
]}
/>;Installation
pnpm --filter your-app add "@commenda/pathfinder@workspace:*"The package currently lives in the Commenda workspace. External installation requires a published version or packed tarball. Import the precompiled stylesheet once; no application Tailwind setup is required.
Examples
Small
Icon-only options
Disabled
API reference
| Prop | Type | Behavior |
|---|---|---|
labelRequired | string | Visible field label. Supply an accessible name when it is omitted. |
optionsRequired | SegmentedControlOption[] | — |
size | "sm"|"md" | — |
className | string | Additional classes for the component root. |
disabledReason | string | — |
valueConditional | string | — |
onValueChangeConditional | (value: string) => void | — |
defaultValueConditional | string | — |
Icon-only options use iconOnly: true and require leadingIcon; label remains required for the tooltip and accessible name. No public Root/Item parts or arbitrary row renderer.
SEGMENTED-SELECTION-01: Use two to four short, equal-weight choices with exactly one selected. Changes update immediately without Apply. Use one or two words per label, similar lengths. Use Tabs for more options or content sections, Switch for on/off, Button for actions. No empty selection. The caller must supply a valid value and reconcile removal of a selected option.
Tab enters the selected radio; arrows select enabled alternatives, including RTL behavior. Re-activating the selected option never deselects it. Name submits the selected string with the form. Disabled choices cannot be selected. Selected state remains visible when the whole group is disabled.
The source uses content-width segments, 16px icons at both sizes, a soft-pearl tray, 2px padding/gaps, 8px outer and 6px inner radii. Selected segment uses white, a hairline and control elevation. Exact source geometry and prose discrepancies are in the rules reference.
Import @commenda/pathfinder/styles.css once at the app root. Event handlers require a client component in Next.js App Router.
Design rules
Figma guidance and reviewed implementation decisions for this component. Rule IDs remain stable for source comments and AI references.
Menus and selection
-
SEGMENTED-SELECTION-01— Figma: two to four short, equal-weight modes, one always selected, immediate change with no Apply. Use Tabs for more options/content sections, Switch for binary on/off, Button for actions. One or two words per label with similar lengths. Icon-only choices need tooltip and accessible name. -
SEGMENTED-STYLE-01— Figma: soft-pearl 200 tray, 300 hairline, radius 8, padding/gap 2. Segment radius 6, horizontal padding 8 sm/12 md, Label/13 Strong, optional 16px icon with gap 6. White selected segment uses control elevation. Hover fills 300; disabled dims the label.