Checkbox-Group. Übersicht

Vorschau.

Label 1 Label 2 Label 3

Was macht die Komponente?

Die Checkbox-Group fasst Checkboxen (auch Checkbox-Panels oder Selection-Expansion-Panels) zu einer Gruppe zusammen. Es können mehrere Einträge gleichzeitig ausgewählt sein. Sie legt Anordnung, Name und Zustände (z.B. Pflichtfeld, deaktiviert) für alle Einträge fest.

Wann soll die Komponente eingesetzt werden?

  • Immer, wenn Checkboxen verwendet werden, die zusammengehören.
  • Für eine Einzelauswahl ist stattdessen die Radio-Button-Group zu verwenden.
 Anwendung

Regeln.

  • Eine Checkbox-Group fasst nur Checkboxen zusammen, die zur selben Frage gehören. Die Gruppe braucht eine verständliche Beschriftung, auch für Screenreader (aria-label).
  • Die Checkboxen stehen bei vielen oder langen Optionen untereinander (orientation="vertical"). Nebeneinander nur bei wenigen, kurzen Optionen. Mit horizontalFrom lässt sich festlegen, ab welcher Breite sie nebeneinander stehen.
  • Alle Checkboxen einer Gruppe haben dieselbe Grösse.
  • Ist eine Auswahl erforderlich, wird bei fehlender Auswahl eine Fehlermeldung zur ganzen Gruppe angezeigt.

Spezifikation.

In Figma öffnen
Beispiele Horizontal.
Auf Storybook ausprobieren HTML einblenden
Vertical.
Auf Storybook ausprobieren HTML einblenden
Vertical To Horizontal.
Auf Storybook ausprobieren HTML einblenden
Horizontal Size XS.
Auf Storybook ausprobieren HTML einblenden
Horizontal Size M.
Auf Storybook ausprobieren HTML einblenden
Horizontal Disabled.
Auf Storybook ausprobieren HTML einblenden
Vertical Disabled.
Auf Storybook ausprobieren HTML einblenden
Horizontal Icon Start.
Auf Storybook ausprobieren HTML einblenden
Vertical Icon Start.
Auf Storybook ausprobieren HTML einblenden
Horizontal Icon End.
Auf Storybook ausprobieren HTML einblenden
Vertical Icon End.
Auf Storybook ausprobieren HTML einblenden
Vertical Icon End Long Label.
Auf Storybook ausprobieren HTML einblenden
Horizontal With Error.
Auf Storybook ausprobieren HTML einblenden
Vertical With Error.
Auf Storybook ausprobieren HTML einblenden
Indeterminate Group.
Auf Storybook ausprobieren HTML einblenden
Horizontal Panel.
Auf Storybook ausprobieren HTML einblenden
Vertical Panel.
Auf Storybook ausprobieren HTML einblenden
Vertical To Horizontal Panel.
Auf Storybook ausprobieren HTML einblenden
HTML in Zwischenablage kopiert. Implementation

Web Components.

Die Web Component ist im Paket @sbb-esta/lyne-elements enthalten.

Storybook mit Live-Beispielen Quellcode auf GitHub

Dokumentation.

The <sbb-checkbox-group> component is used as a container for a collection of either
sbb-checkboxs, sbb-checkbox-panels,
or sbb-selection-expansion-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-expansion-panel>
    <sbb-checkbox-panel>
      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-panel>
  </sbb-selection-expansion-panel>
</sbb-checkbox-group>
Slots.

The content is projected in an unnamed slot.

The component can display one or more sbb-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-error slot="error">You must accept all the terms and conditions.</sbb-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, which can be used to change the size
of all the inner <sbb-checkbox> or <sbb-checkbox-panel> elements. Available sizes are xs, s and m.

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

Angular.

Diese Komponente gibt es auch für Angular im Paket @sbb-esta/lyne-angular.

Angular-Übersicht Angular-API Angular-Beispiele API

class: SbbCheckboxGroupElement, sbb-checkbox-group.

Properties.

Name Attribute Privacy Type Default Description
checkboxes - public (SbbCheckboxElement | SbbCheckboxPanelElement)[] List of contained checkbox elements.
disabled disabled public boolean false Whether the component is disabled.
horizontalFrom horizontal-from public 'zero' | 'small' | 'large' | 'ultra' | null null Overrides the behavior of orientation property.
orientation orientation public 'horizontal' | 'vertical' 'horizontal' Indicates the orientation of the checkboxes or panels inside the group.
required required public boolean false Whether the component is required.
size size public 'xs' | 's' | 'm' | null null Size variant, either xs (lean theme default), s or m (standard theme default).

Slots.

Name Description
Use the unnamed slot to add sbb-checkbox, sbb-checkbox-panel, sbb-selection-action-panel and sbb-selection-expansion-panel elements to the sbb-checkbox-group.
error Slot used to render a sbb-error inside the sbb-checkbox-group.