ToggleGroup

Set of related toggle buttons allowing single or multiple selection within the group.

Examples

Single-select group for text alignment.

Grid / List toggle with icon symbols.

Format toolbar supporting multiple active states at once.

Segmented control style. Moving highlight indicates selection.

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 { ToggleGroup } from "@rokle/components";

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

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

Prop	Type	Default	Description
items	{ label: string; value: string; icon?: ReactNode }[]	-	Toggle group items.
value	string \| string[]	-	Selected value or values.
type	"single" \| "multiple"	"single"	Whether one or multiple items can be active.