SegmentGroup

Segmented control for selecting one option from a small set, visually similar to a button group.

Examples

A segmented control for mutually exclusive choices.

Segments with icon characters.

Segment groups at different widths.

One segment disabled within an otherwise interactive group.

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

import { SegmentGroup } from "@rokle/components";

import { SegmentGroup } from "@rokle/components";

export function Example() {
  return <SegmentGroup />;
}

Prop	Type	Default	Description
items	{ label: string; value: string }[]	-	Segment options.
value	string	-	Currently selected segment value.
onValueChange	(value: string) => void	-	Called when selection changes.