Components

ToggleGroup

A set of Toggles that share one value, with one tab stop and arrow keys between items.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Single choice

By default, pressing an item releases the others. defaultValue sets the first pressed item.

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>
  );
}

Multiple choice

multiple lets more than one item stay pressed. variant and size pass to every item.

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

export default function Multiple() {
  return (
    <ToggleGroup label="Text format" multiple defaultValue={['bold']} variant="secondary">
      <Toggle value="bold" icon="bold" label="Bold" />
      <Toggle value="italic" icon="italic" label="Italic" />
      <Toggle value="underline" icon="underline" label="Underline" />
    </ToggleGroup>
  );
}

Vertical

orientation="vertical" stacks the items; focus moves with the up and down arrow keys.

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

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

Controlled

With value and onValueChange you hold the pressed values. The value is always an array.

["left"]

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

export default function Controlled() {
  const [value, setValue] = useState(['left']);
  return (
    <div className="flex items-center gap-md">
      <ToggleGroup label="Text alignment" value={value} onValueChange={setValue} size="sm">
        <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>
      <code className="type-body-sm text-fg-subtle">{JSON.stringify(value)}</code>
    </div>
  );
}

Light and dark mode

Items use the Toggle tokens; the group adds no colour.

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

export default function Multiple() {
  return (
    <ToggleGroup label="Text format" multiple defaultValue={['bold']} variant="secondary">
      <Toggle value="bold" icon="bold" label="Bold" />
      <Toggle value="italic" icon="italic" label="Italic" />
      <Toggle value="underline" icon="underline" label="Underline" />
    </ToggleGroup>
  );
}