Components

Toggle Group

A set of toggles behaving as single or multiple choice.

Usage

Basic

HTML

<bs:bsui-toggle-group defaultValue="center">
  <bs:bsui-toggle-group-item value="left" label="Left" />
  <bs:bsui-toggle-group-item value="center" label="Center" />
  <bs:bsui-toggle-group-item value="right" label="Right" />
</bs:bsui-toggle-group>

Multiple selection

Any number of items can be pressed at once.

HTML

<bs:bsui-toggle-group multiple="true" defaultValue="bold">
  <bs:bsui-toggle-group-item value="bold" label="Bold" />
  <bs:bsui-toggle-group-item value="italic" label="Italic" />
  <bs:bsui-toggle-group-item value="underline" label="Underline" />
</bs:bsui-toggle-group>

Vertical

The same group stacked, for a sidebar rather than a toolbar.

HTML

<bs:bsui-toggle-group orientation="vertical" defaultValue="list">
  <bs:bsui-toggle-group-item value="list" label="List" />
  <bs:bsui-toggle-group-item value="board" label="Board" />
  <bs:bsui-toggle-group-item value="calendar" label="Calendar" />
</bs:bsui-toggle-group>

Unavailable option

A single item can be disabled while the rest stay selectable.

HTML

<bs:bsui-toggle-group defaultValue="monthly">
  <bs:bsui-toggle-group-item value="monthly" label="Monthly" />
  <bs:bsui-toggle-group-item value="yearly" label="Yearly" />
  <bs:bsui-toggle-group-item value="lifetime" label="Lifetime" disabled="true" />
</bs:bsui-toggle-group>

Anatomy

Toggle Group is composed of the blocks below. Each one is a separate block that only renders inside its parent.

bsui/toggle-group
bsui/toggle-group-item

Attributes

Attribute	Type	Default
`defaultValue`	`text`	—
`multiple`	`toggle`	`false`
`orientation`	`horizontal` `vertical`	`horizontal`

`bsui/toggle-group-item`

Attribute	Type	Default
`value`	`text`	—
`label`	`richtext`	—
`disabled`	`toggle`	`false`