ToggleGroup

When to use

ToggleGroup offers the options of one setting together: text alignment (single choice), text format (multiple choice), list or grid view.

When not to use

• For a choice submitted with a form: Use a radio group or a checkbox group; ToggleGroup sends no form value.
• For independent actions: Use ButtonGroup.
• To switch between page sections: Tabs manage content panels; ToggleGroup shows no panel.

Anatomy

LightDark

Copy code

import { Toggle, ToggleGroup } from '@bigbang/ui';

export default function Single() {
  return (
    <ToggleGroup label="Text alignment" defaultValue={['left']}>
      <Toggle value="left" icon="align-left" label="Align left" />
      <Toggle value="center" icon="align-center" label="Centre" />
      <Toggle value="right" icon="align-right" label="Align right" />
    </ToggleGroup>
  );
}

1. Container: role="group" with aria-label from label; space-md (8 px) between items.
2. Items: Toggle components, each with a value.
3. Pressed item: a color-surface-selected fill and a color-border-selected border.

Behaviour

• The group is one tab stop; arrow keys move focus between items along orientation.
• In single choice, pressing an item releases the other; pressing the pressed item again releases it too.
• With multiple, each item is pressed on its own.
• variant and size reach the items through context; an item’s own value wins.
• disabled turns off every item.

Guidelines

• Give the group a label that names the setting: “Text alignment”.
• On icon items, give each item a label too.
• Use two to five items in a group; for more, consider a menu.
• If one item must always stay pressed in single choice, ignore the empty array in onValueChange.

Content

• The group label is the name of the setting; the item labels are the names of the options.

Turkish	English
Metin hizası	Text alignment
Sola hizala	Align left
Ortala	Centre
Sağa hizala	Align right

Related components

• Toggle: the item of the group.
• ButtonGroup: related actions that do not stay pressed.
• IconButton: a single icon action.