Toggle group · Bones

Several toggles, one value array, wrapping the Base UI Toggle Group. The natural fit for toolbars: formatting marks, alignment, view switches.

Playground

Every control maps to a prop. The Code tab always shows the markup for exactly what you've configured.

Variants

Single-select (alignment: one at a time) beside multiple (formatting: any combination), in both sizes. Size lives on the toggles, not the group.

States

Pressed and unpressed belong to the toggles; disabled on the group dims every member. Arrow keys move focus along the group, and in single-select mode pressing the active toggle again unpresses it, so the value can become an empty array.

Styling states

The group is a plain flex container, .ub-toggle-group, carrying data-multiple when several can be pressed and data-disabled when switched off; the toggles keep their own data-pressed. A segmented look is a few lines:

.ub-toggle-group {
  gap: 0;
  padding: 0.125rem;
  border-radius: var(--ub-radius-control);
  background: var(--ub-bg-muted);
}

.ub-toggle-group .ub-toggle[data-pressed] {
  background: var(--ub-bg);
  box-shadow: var(--ub-shadow-sm);
}

Props

The group passes the full Base UI API through, and the toggles inside are regular Bones Toggles. The essentials:

Prop	Type	Default	Description
`defaultValue`	`string[]`	–	Pressed values on first render, when uncontrolled.
`value`	`string[]`	–	Controlled pressed values. Pair with onValueChange.
`onValueChange`	`(value: string[]) => void`	–	Called with the new array when any toggle changes; empty when nothing is pressed.
`multiple`	`boolean`	`false`	Allow several pressed at once instead of single-select.
`disabled`	`boolean`	`false`	Disables every toggle inside.
`Toggle.value`	`string`	–	Joins the toggle to the group under this value.

Agent instructions

Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.

ToggleGroup, from @usebones/react.
- Wraps Bones Toggles; each joins via value="...". Group state is a string array: defaultValue or value + onValueChange.
- Single-select by default (alignment); multiple for independent toggles (formatting marks). Single-select can still unpress to []; control value if one must stay pressed.
- Size goes on each Toggle (size="compact"); the group has no size prop. disabled on the group disables every member.
- Restyle in CSS via .ub-toggle-group, [data-multiple], [data-disabled]; the toggles style themselves via [data-pressed]. Tokens only.