Zur Navigation Zum Inhalt Kontakt Menu Find component Overview Lyne Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Base Components Overview Base Components Overview Releases Design Tokens Komponenten Overview Base Informationen Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines 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.
Examples
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
Imprint Contact Cookie settings