It is part of the autocomplete or select component.
The <sbb-option> is a component which can be used to display items in components like
sbb-autocomplete or a sbb-select.
It is based on the native option element. As such, it can be labeled via its text content.
The component can optionally display an <sbb-icon> at the component start using the iconName property
or via custom content using the icon slot.
<sbb-option>Option label</sbb-option>
<sbb-option icon-name="info">Option label</sbb-option>
Like the native option, the component has a value property.
The state of the <sbb-option> can be configured via the selected and disabled attributes/properties.
When disabled, the selection via click is prevented.
If the <sbb-option> is nested in an <sbb-optgroup> component, it inherits the disabled state from
the parent.
<sbb-option value="value" selected>Option label</sbb-option>
<sbb-option value="value" disabled>Option label</sbb-option>
Consumers can listen to the optionselected event on the <sbb-option> component to react to the selected
value. The event is triggered if the element has been selected by user interaction. Alternatively,
the optionselectionchange event can be listened to, which is triggered if the element has either been
selected or deselected.
If the label slot contains only a text node, it is possible to search for text in the <sbb-option>
using the highlight method, passing the desired text; if the text is present it will be highlighted
in bold.
<!-- Supported scenario -->
<sbb-option> Highlightable caption</sbb-option>
<!-- Not supported scenarios -->
<sbb-option>
<span>Not highlightable caption</span>
</sbb-option>
<sbb-option>
<img src="..." />
Highlightable caption
</sbb-option>
This component supports any types of values, including complex objects.
The type can be specified using the generic type parameter T of SbbOption<T>.
const option = document.querySelector('sbb-option');
option.value = { value: 'value', name: 'name' };
option.textContent = 'Example';
The <sbb-optgroup> is a component used to group more <sbb-option> within an
sbb-autocomplete or an
sbb-select component.
The component has a label property as the 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>
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>
The <sbb-option-hint> is an optional component used to show a hint message within an
sbb-autocomplete.
<sbb-autocomplete>
<sbb-option value="1"> Option 1 </sbb-option>
...
<sbb-divider></sbb-divider>
<sbb-option-hint>42 more hits</sbb-option-hint>
</sbb-autocomplete>
The <sbb-option-hint> has a negative property which will be automatically inherited from the parent <sbb-autocomplete>.
<sbb-autocomplete>
<sbb-option value="1">Option 1</sbb-option>
...
<sbb-option-hint>42 more hits</sbb-option-hint>
</sbb-autocomplete>
By default, the <sbb-option-hint> is treated as a simple text from screen readers, and it is not easily accessible by screen reader users.
If deemed necessary, the <sbb-option-hint> can be marked with the aria-live attribute.
SbbOptGroupElement, sbb-optgroup| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
disabled | disabled | public | boolean | false | Whether the component is disabled. |
label | label | public | string | '' | Option group label. |
| Name | Description |
|---|---|
Use the unnamed slot to add sbb-option elements to the sbb-optgroup. |
SbbOptionElement, sbb-option| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
disabled | disabled | public | boolean | false | Whether the component is disabled. |
iconName | icon-name | public | string | '' | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
selected | selected | public | boolean | Whether the option is selected. | |
value | value | public | (T = string) | null | null | Value of the option. |
| Name | Type | Description | Inherited From |
|---|---|---|---|
optionselected | Event | Emits when an option was selected by user. | SbbOptionBaseElement |
optionselectionchange | Event | The optionselectionchange event is dispatched when the option selection status changes. |
| Name | Default | Description |
|---|---|---|
--sbb-option-icon-container-display | none | Can be used to reserve space even when preserve-icon-space on autocomplete is not set or iconName is not set. |
| Name | Description |
|---|---|
| Use the unnamed slot to add content to the option label. | |
icon | Use this slot to provide an icon. If icon-name is set, a sbb-icon will be used. |
SbbOptionHintElement, sbb-option-hint| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
negative | negative | public | boolean | false | Negative coloring variant flag. |
| Name | Description |
|---|---|
| Use the unnamed slot to display the hint message. |