Zur Navigation Zum Inhalt Kontakt Menu Komponente finden Übersicht Lyne Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons 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
Komponente finden

Lyne

Impressum Kontakt Cookie Einstellungen