Toggle Group

A set of toggle buttons (e.g. a text-formatting toolbar), single- or multiple-select, with roving-focus keyboard navigation.

<div
  data-controller="zag-toggle-group"
  data-part="root"
  data-zag-toggle-group-multiple-value="true"
  class="border-border bg-popover inline-flex gap-1 rounded-lg border p-1"
>
  <button
    data-part="item"
    data-value="bold"
    class="text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-primary/10 data-[state=on]:text-primary rounded px-3 py-1.5 text-sm font-bold focus:outline-none focus-visible:ring-2"
  >
    B
  </button>
  <button
    data-part="item"
    data-value="italic"
    class="text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-primary/10 data-[state=on]:text-primary rounded px-3 py-1.5 text-sm italic focus:outline-none focus-visible:ring-2"
  >
    I
  </button>
  <button
    data-part="item"
    data-value="underline"
    class="text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-primary/10 data-[state=on]:text-primary rounded px-3 py-1.5 text-sm underline focus:outline-none focus-visible:ring-2"
  >
    U
  </button>
</div>

Parts

root, item (each with a data-value).

Values

Attribute	Type	Default	Description
data-zag-toggle-group-value-value	Array	[]	Pressed value(s) by default (JSON).
data-zag-toggle-group-multiple-value	Boolean	false	Allow multiple items pressed.
data-zag-toggle-group-disabled-value	Boolean	false	Disable the group.
data-zag-toggle-group-orientation-value	String	"horizontal"	"horizontal" or "vertical".
data-zag-toggle-group-loop-focus-value	Boolean	true	Wrap arrow-key focus.
data-zag-toggle-group-roving-focus-value	Boolean	true	Use roving tabindex.
data-zag-toggle-group-deselectable-value	Boolean	true	Allow toggling an item back off.

Events

Emits zag-toggle-group:change — detail is { value: string[] }.

Programmatic control

value (getter), setValue(value).