What does the component do?

It is part of the autocomplete or select component.

When should the component be used?

Only within the autocomplete or select component.

Parent Components

Autocomplete

Select

Demo

Playground

Option 1

Option 2

Option 3

Option 1

Option 2

Option 3

Disabled

Yes

Background

White

Milk

Iron

Charcoal

Black

Examples

Standalone

Autocomplete

Select

Multiple Select

HTML-Markup kopiert.

Implementation

The sbb-optgroup is a component used to group more sbb-option
within a sbb-autocomplete
or a sbb-select component.

A sbb-divider is displayed at the bottom of the component.

Slots

It is possible to provide a set of sbb-option via an unnamed slot;
the component has also a label property as name of the group.

<sbb-optgroup label="Group">
  <sbb-option value="1" selected>1</sbb-option>
  <sbb-option value="2">2</sbb-option>
  <sbb-option value="3">3</sbb-option>
</sbb-optgroup>

States

The component has a disabled property which sets all the sbb-option in the group as disabled.

<sbb-optgroup label="Disabled group" disabled>
  <sbb-option value="A">A</sbb-option>
  <sbb-option value="B">B</sbb-option>
  <sbb-option value="C">C</sbb-option>
</sbb-optgroup>

Properties

Name	Attribute	Privacy	Type	Default	Description
`disabled`	`disabled`	public	`boolean`	`false`	Whether the component is disabled.
`label`	`label`	public	`string`		Option group label.

Slots

Name	Description
	Use the unnamed slot to add `sbb-option` elements to the `sbb-optgroup`.