ToggleGroup

ToggleGroup renders a row of options as a connected segmented control. Set type="single" for an exclusive choice (like a view switcher, exposed as a radiogroup) or type="multiple" to toggle any number of options on. It is controlled: value is a single value in single mode and an array in multiple mode, and onChange returns the next selection. Each option can carry an icon and be individually disabled.

Example

Preview

import { ToggleGroup } from '@officina/ui';
import { useState } from 'react';

function ViewSwitcher() {
  const [view, setView] = useState('grid');
  return (
    <ToggleGroup
      type="single"
      value={view}
      onChange={setView}
      ariaLabel="View"
      options={[
        { value: 'grid', label: 'Grid' },
        { value: 'list', label: 'List' },
      ]}
    />
  );
}

API

Prop	Type	Default	Description
onChange*	((value: T) => void) \| ((value: T[]) => void)	—	Called with the newly selected value. Called with the next array of active values when any toggle flips.
options*	ToggleOption<T>[]	—	Toggle options to render.
type*	enum	—	Single-select mode — only one option active at a time. Multi-select mode — any number of options active.
value*	string \| T[]	—	The active option value (controlled). The active option values (controlled).
ariaLabel	string	—	Accessible label for the group (maps to `aria-label`).

Example

API

On this page