Inputs

Segmented control

Single, always-selected choice. The selected segment takes the pill at once. A segment that's off can say why, as a disabled button does.

Live example

Each family is its own entry point, so a page loads only what it uses.

tsx

import { SegmentedControl, SegmentedControlItem } from "@nibapp/ui/components/segmented-control";

Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.

Single-select segmented control. The selected segment takes the pill at once: nothing slides. Arrow keys move focus; Space/Enter select.

Prop	Type	Default	Description
size	"sm" \| "md"	"md"
block	boolean	—	Stretch to the container; segments share the width equally.
value	string	—	The selected segment (controlled). A segmented control always has exactly one selection.
defaultValue	string	—
onValueChange	(value: string) => void	—
aria-label	string	—	Accessible name for the group, e.g. "Permission mode".
children (required)	ReactNode	—

Also takes the props of Base UI's ToggleGroup, except value, defaultValue, onValueChange and multiple.

Prop	Type	Default	Description
value (required)	string	—
icon	ReactNode	—	Leading icon. With no children the segment becomes a square icon button (needs `aria-label`).
disabledReason	string \| undefined	—	Disables the segment and says why: the reason is its tooltip and its accessible description, and the segment stays in the arrow keys' path (`aria-disabled`) so a keyboard reaches it.

Also takes the props of Base UI's Toggle, except value, pressed, defaultPressed and onPressedChange.