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 Checkbox-Group Implementation

The sbb-checkbox-group component is used as a container for one or multiple
sbb-checkbox components,
or, alternatively, for a collection of sbb-selection-panel.

<sbb-checkbox-group>
  <sbb-checkbox value="checkbox-1">Label 1</sbb-checkbox>
  <sbb-checkbox value="checkbox-2">Label 2</sbb-checkbox>
  <sbb-checkbox value="checkbox-3">Label 3</sbb-checkbox>
</sbb-checkbox-group>

<sbb-checkbox-group>
  <sbb-selection-panel>
    <sbb-checkbox>
      Value
      <span slot="suffix">
        <sbb-icon></sbb-icon>
        <span class="sbb-text-xs sbb-text--bold">CHF</span>
        <span class="sbb-text-m sbb-text--bold">40.00</span>
      </span>
    </sbb-checkbox>
  </sbb-selection-panel>
</sbb-checkbox-group>

Slots

The content is projected in an unnamed slot.

The component can display one or more sbb-form-error components
right below the sbb-checkbox-group using the error slot.

<sbb-checkbox-group>
  <sbb-checkbox value="checkbox-1">Label 1</sbb-checkbox>
  <sbb-checkbox value="checkbox-2">Label 2</sbb-checkbox>
  <sbb-checkbox value="checkbox-3">Label 3</sbb-checkbox>
  <sbb-form-error slot="error">You must accept all the terms and conditions.</sbb-form-error>
</sbb-checkbox-group>

States

It is possible to mark the entire group as disabled or required using the properties disabled and required.

<!-- All the child sbb-checkbox will be marked as required. -->
<sbb-checkbox-group required> ... </sbb-checkbox-group>

<!-- All the child sbb-checkbox will be marked as disabled. -->
<sbb-checkbox-group disabled> ... </sbb-checkbox-group>

Style

The orientation property is used to set item orientation.
Possible values are horizontal (default) and vertical.
The optional property horizontalFrom can be used in combination with orientation='vertical' to
indicate the minimum breakpoint from which the orientation changes to horizontal.

<sbb-checkbox-group orientation="vertical" horizontal-from="large"> ... </sbb-checkbox-group>

The component has a size property too, which can be used to change the size of all the inner sbb-checkbox.
Two values are available, s and m, which is the default

<sbb-checkbox-group size="s"> ... </sbb-checkbox-group>

Properties

Name Attribute Privacy Type Default Description
required required public boolean false Whether the checkbox group is required.
size size public SbbCheckboxSize 'm' Size variant, either m or s.
horizontalFrom horizontal-from public SbbHorizontalFrom | undefined Overrides the behaviour of orientation property.
orientation orientation public SbbOrientation 'horizontal' Indicates the orientation of the checkboxes inside the <sbb-checkbox-group>.
checkboxes - public SbbCheckboxElement[] List of contained checkbox elements.
disabled disabled public boolean false Whether the component is disabled.

Slots

Name Description
Use the unnamed slot to add sbb-checkbox elements to the sbb-checkbox-group.
error Slot used to render a sbb-form-error inside the sbb-checkbox-group.
Beispiele
Horizontal
Vertical
Vertical To Horizontal
Horizontal Size M
Horizontal Disabled
Vertical Disabled
Horizontal Icon Start
Vertical Icon Start
Horizontal Icon End
Vertical Icon End
Vertical Icon End Long Label
Horizontal With Sbb Form Error
Vertical With Sbb Form Error
Indeterminate Group
HTML-Markup kopiert.
Playground
Label 1Label 2Label 3
Orientierung Vertikal Horizontal Grössen S M Icon Position Am Anfang Am Ende Hintergrund White Milk Iron Charcoal Black
Impressum Contact Paramètres des cookies