Zur Navigation Zum Inhalt Kontakt Menu Trouver un composant Aperçu Lyne Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Aperçu Base Composants Aperçu Base Composants Overview Releases Design Tokens Komponenten Aperçu Base Informations Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English Option Implementation

The sbb-option is a component which can be used to display items in components like
sbb-autocomplete or a sbb-select.

Slots

It is possible to provide a label via an unnamed slot; the component can optionally display a 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>

States

Like the native option, the component has a value property.

The selected, disabled and active properties are connected to the self-named states.
When disabled, the selection via click is prevented.
If the sbb-option is nested in a sbb-optgroup component, it inherits from the parent the disabled state.

<sbb-option value="value" selected>Option label</sbb-option>

<sbb-option value="value" active>Option label</sbb-option>

<sbb-option value="value" ß disabled>Option label</sbb-option>

Events

Consumers can listen to the optionSelected event on the sbb-option component to intercept the selected value;
the event is triggered if the element has been selected by some user interaction. Alternatively,
the selectionChange event can be listened to, which is triggered if the element has been both selected or deselected.

Style

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>

Properties

Name Attribute Privacy Type Default Description
value value public string Value of the option.
active active public boolean | undefined Whether the option is currently active.
selected selected public boolean Whether the option is selected.
disabled disabled public boolean false Whether the component is disabled.
iconName icon-name public string | undefined 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.

Events

Name Type Description Inherited From
optionSelectionChange CustomEvent<void> Emits when the option selection status changes.
optionSelected CustomEvent<void> Emits when an option was selected by user.

CSS Properties

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.

Slots

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.
Beispiele
Standalone
With Icon
With Disabled State
With Active State
With Icon Space
Autocomplete
Select
HTML-Markup kopiert.
Playground
Value 1Value 2Value 3Value 4Value 5
Disabled Nein Ja Icon Ja Nein Hintergrund White Milk Iron Charcoal Black
Impressum Contact Paramètres des cookies