SegmentedControl

Anatomy

import { SegmentedControl } from "chroma-panel";

Only inside a panel

This is one of the parts the built-in modes are made of. It reads the colour through usePanel(), so it only works inside a ChromaPanel — typically in a custom mode. For a picker outside the panel, use the store and hooks.

API reference

Props

Prop	Type	Default	Description
items*	SegmentedItem[]	—	The segments, in order. `content` is what each tab renders.
value*	string	—	Id of the selected segment.
onChange*	(id: string) => void	—	Fires with the id chosen.
size	"md" \| "sm"	'md'	`'sm'` is the compact height, for toolbars inside a panel.
ariaLabel*	string	—	Accessible name for the tablist.
controls	(id: string) => string	—	Maps a segment id to the id of the panel it controls, for `aria-controls`.
segmentId	(id: string) => string	—	Maps a segment id to the DOM id given to that tab.
disabled	boolean	false	Makes every segment unselectable.
className	string	—	Class on the tablist.
tabClassName	string	—	Class on each tab.