ToggleGroup

A set of toggle buttons, one or many on, with one tab stop and arrow keys.

Multiple

values is two-way. One tab stop; arrows move, Space and Enter press.

values: bold, changes: 0

Code

<ToggleGroup type="multiple" values={state.marks} label="Text formatting">
  <ToggleGroupItem value="bold" label="Bold"><Icon name="bold" /></ToggleGroupItem>
  <ToggleGroupItem value="italic" label="Italic"><Icon name="italic" /></ToggleGroupItem>
  <ToggleGroupItem value="underline" label="Underline"><Icon name="underline" /></ToggleGroupItem>
</ToggleGroup>

Usage

import { ToggleGroup, ToggleGroupItem } from "@elements/ui/toggle-group";

<ToggleGroup type="multiple" values={editor.marks} label="Text formatting">
  <ToggleGroupItem value="bold" label="Bold"><Icon name="bold" /></ToggleGroupItem>
  <ToggleGroupItem value="italic" label="Italic"><Icon name="italic" /></ToggleGroupItem>
</ToggleGroup>

<ToggleGroup type="single" value={view.filter} variant="outline" spacing={0}>
  <ToggleGroupItem value="all">All</ToggleGroupItem>
  <ToggleGroupItem value="missed">Missed</ToggleGroupItem>
</ToggleGroup>

Examples

Single, outline, joined

spacing 0 joins the items. Clicking the pressed item turns it off.

value: all

Code

<ToggleGroup type="single" value={state.filter} variant="outline" spacing={0}>
  <ToggleGroupItem value="all">All</ToggleGroupItem>
  <ToggleGroupItem value="missed">Missed</ToggleGroupItem>
</ToggleGroup>

Sizes

size on the group sizes every item.

Code

<ToggleGroup type="single" value={state.position} size="sm" variant="outline" spacing={0}>...</ToggleGroup>
<ToggleGroup type="single" value={state.position} variant="outline" spacing={0}>...</ToggleGroup>
<ToggleGroup type="single" value={state.position} size="lg" variant="outline" spacing={0}>...</ToggleGroup>

Spacing

spacing 1 to 4 sets the gap from the space scale.

Code

<ToggleGroup type="single" value={state.position} variant="outline" spacing={2}>
  <ToggleGroupItem value="top">Top</ToggleGroupItem>
  ...
</ToggleGroup>

Vertical

orientation stacks the items; Up and Down move.

Code

<ToggleGroup type="multiple" values={state.marks} orientation="vertical" variant="outline" spacing={0}>...</ToggleGroup>

Custom content

Items hold any content.

Code

<ToggleGroup type="single" value={state.weight} variant="outline" spacing={2} label="Font weight">
  <ToggleGroupItem value="light" class="weight-light">Aa Light</ToggleGroupItem>
  ...
</ToggleGroup>

Always a value

Bind a single group to an accessor that ignores the empty value, and pressing the pressed item keeps it on.

value: center

Code

// align = { get value() { return state.align; }, set value(v) { if (v) state.align = v; } }
<ToggleGroup type="single" value={align.value} variant="outline" spacing={0} label="Text alignment">
  <ToggleGroupItem value="left" label="Align left"><Icon name="align-left" /></ToggleGroupItem>
  <ToggleGroupItem value="center" label="Align center"><Icon name="align-center" /></ToggleGroupItem>
  <ToggleGroupItem value="right" label="Align right"><Icon name="align-right" /></ToggleGroupItem>
</ToggleGroup>

Disabled, roving off, no loop

A disabled group, a disabled item, and a group where every item is its own tab stop.

Code

<ToggleGroup type="single" value={state.free} rovingFocus={false} loop={false}>...</ToggleGroup>
<ToggleGroup type="multiple" values={state.disabled} disabled>...</ToggleGroup>

Cancel a change

onValueChange (and onValuesChange) runs before the value changes and gets details second; details.cancel() keeps it as it was.

value: list, attempts: 0, last: none

Code

<ToggleGroup type="single" value={guard.value} onValueChange={(value, details) => {
  if (!guard.allowed) details.cancel();
}}>
  <ToggleGroupItem value="list">List</ToggleGroupItem>
  <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
  <ToggleGroupItem value="board">Board</ToggleGroupItem>
</ToggleGroup>

Right to left

ArrowLeft moves to the next item.

Reference ToggleGroup in the manual Every part, attribute, slot, key and data attribute.