SegmentedControl

Single-select toggle group (the Gavel Segmented “Mine / All / Bots” pattern). A muted track holds mutually-exclusive segments; the active segment lifts onto the card surface. Built on clicky tokens so it inherits dark-mode and density. Use for small, flat choice sets — reach for Select when the option count grows.

Source

Import

import { SegmentedControl } from "@flanksource/clicky-ui/components";

Demos

Default · Open in Storybook

Small · Open in Storybook

With Disabled Option · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
aria-label	string	—	Accessible group label.
className	string	—	Classes applied to the track.
onChange*	(…) => void	—	Called with the newly selected id.
options*	SegmentedOption<T>[]	—	Mutually-exclusive options rendered left to right.
size	enum	md	Control size. `md` (default) matches form controls; `sm` is denser and `lg` is card-like.
value*	string	—	Currently selected option id.
wrap	boolean	false	Allows segments to wrap instead of overflowing horizontally.