SegmentedControl

View switch

import { useState } from 'react';
import { SegmentedControl } from '@rookcom/monarch-react';

// BoardIcon, GridIcon, ListIcon: demo icons from the docs site; use your own.

function ViewSwitch() {
  const [view, setView] = useState<'list' | 'board' | 'grid'>('list');
  return (
    <SegmentedControl
      aria-label="View"
      value={view}
      onValueChange={setView}
      options={[
        { value: 'list', label: 'List', icon: <ListIcon /> },
        { value: 'board', label: 'Board', icon: <BoardIcon /> },
        { value: 'grid', label: 'Grid', icon: <GridIcon /> },
      ]}
    />
  );
}

<ViewSwitch />

Usage examples

Sizes, icon-only, suffix

import { SegmentedControl } from '@rookcom/monarch-react';

// GridIcon, ListIcon: demo icons from the docs site; use your own.

<SegmentedControl
  aria-label="Layout"
  size="sm"
  defaultValue="grid"
  options={[
    { value: 'list', label: 'List', icon: <ListIcon />, hideLabel: true },
    { value: 'grid', label: 'Grid', icon: <GridIcon />, hideLabel: true },
  ]}
/>
<SegmentedControl
  aria-label="Billing period"
  size="lg"
  defaultValue="monthly"
  options={[
    { value: 'monthly', label: 'Monthly' },
    { value: 'yearly', label: 'Yearly', suffix: '2 months free' },
  ]}
/>
<SegmentedControl
  aria-label="Range"
  block
  defaultValue="7d"
  options={[
    { value: '1d', label: '1 day' },
    { value: '7d', label: '7 days' },
    { value: '30d', label: '30 days' },
    { value: '90d', label: '90 days', disabled: true },
  ]}
/>

ToggleGroup with counts

import { useState } from 'react';
import { ToggleGroup } from '@rookcom/monarch-react';

function Filters() {
  const [value, setValue] = useState<string[]>(['open']);
  return (
    <ToggleGroup
      aria-label="Show"
      size="sm"
      value={value}
      onValueChange={setValue}
      options={[
        { value: 'open', label: 'Open', count: 12 },
        { value: 'waiting', label: 'Waiting', count: 3 },
        { value: 'closed', label: 'Closed', count: 48 },
      ]}
    />
  );
}

<Filters />

Purpose

Picks one of a few short, mutually exclusive options shown side by side: a view (list or board), a period (monthly or yearly), a scope. ToggleGroup is the same control for several independent on/off options.

Use when

Two to five short options, all visible at once, and changing them updates the view immediately.
A compact filter set where several options can be on (ToggleGroup).

Avoid when

Each option shows its own panel of content: use Tabs.
More than five options, or long labels: use Select.
A single on/off setting: use Switch.

Design principles

One ARIA model per meaning: single choice is always a radio group, multiple choice is always toggle buttons. Never a tablist without panels.
One Tab stop for the whole control; arrow keys move inside it.
The selected option is a raised surface with a border, so selection is not shown by shade alone.
Labels stay short; icons help but never replace the accessible name.

API reference

import { SegmentedControl, ToggleGroup } from '@rookcom/monarch-react';

Export	Kind	Rendering	Root class
`SegmentedControl`	component	client	`.mn-segmented-control`
`ToggleGroup`	component	client	`.mn-segmented-control`

Both components take an options array of SegmentedOption and forward their ref to the group <div>.

Both are generic over the option value: value and onValueChange are typed by the options you pass.

An accessible name is required by the type: aria-label or aria-labelledby.

Generated from the TypeScript declarations of packages/react/src/components/forms/segmented-control.

Properties

SegmentedControl: value/onValueChange(value) (controlled) or defaultValue; name adds a hidden input for forms.

ToggleGroup: value/onValueChange(values) (controlled) or defaultValue, as arrays in option order.

SegmentedOption: value, label, icon, hideLabel (icon-only), count, suffix, disabled.