Toggle Group

Use bo-toggle-group when related toggles share one selection model. Use bo-toggle-group-item for each option.

Usage

list

<bo-toggle-group class="w-full" v-model="format" aria-label="View format">
  <bo-toggle-group-item value="list">List</bo-toggle-group-item>
  <bo-toggle-group-item value="grid">Grid</bo-toggle-group-item>
</bo-toggle-group>

Multiple selection

Set multiple to model a string[].

open

<bo-toggle-group class="w-full" v-model="filters" multiple aria-label="Filters">
  <bo-toggle-group-item value="open">Open</bo-toggle-group-item>
  <bo-toggle-group-item value="assigned">Assigned</bo-toggle-group-item>
</bo-toggle-group>

API

Component / prop / event / slot	Type	Default	Description
BoToggleGroup	component	-	Group context and selection model.
id / dataTestId	string	autogenerated	Group attributes.
modelValue	string | string[]	-	Selected value or values.
defaultValue	string | string[]	-	Initial uncontrolled selection.
multiple / disabled	boolean	false	Selection mode and group state.
variant / size	BoToggleVariant / BoToggleSize	default / default	Styles applied to items.
orientation	horizontal | vertical	horizontal	Item direction and keyboard navigation.
role / ariaLabel / ariaLabelledBy	native accessibility types	group / -	Group semantics.
update:modelValue	event	-	Emitted when selection changes.
default	slot	-	BoToggleGroupItem children.
BoToggleGroupItem	component	-	Item with required value.
id / dataTestId	string	autogenerated	Item attributes.
value	string	required	Value represented by the item.
disabled / ariaLabel	boolean / string	false / -	Item state and accessible name.
default	slot	-	Item content.