Checkbox-Group. Overview

Preview.

Label 1 Label 2 Label 3

What does the component do?

The checkbox group combines checkboxes (also checkbox panels or selection expansion panels) into one group. Several entries can be selected at the same time. It defines arrangement, name and states (e.g. required, disabled) for all entries.

When should the component be used?

  • Whenever checkboxes that belong together are used.
  • For a single selection, use the radio button group instead.
 Usage

Rules.

  • A checkbox group only combines checkboxes that belong to the same question. The group needs a clear label, also for screen readers (aria-label).
  • For many or long options, checkboxes are arranged one below the other (orientation="vertical"). Side by side only for a few short options. horizontalFrom defines from which width they are placed side by side.
  • All checkboxes in a group have the same size.
  • If a selection is required and none is made, an error message is shown for the whole group.

Specification.

Open in Figma
Examples Horizontal.
Try it out on Storybook Show HTML
Vertical.
Try it out on Storybook Show HTML
Vertical To Horizontal.
Try it out on Storybook Show HTML
Horizontal Size XS.
Try it out on Storybook Show HTML
Horizontal Size M.
Try it out on Storybook Show HTML
Horizontal Disabled.
Try it out on Storybook Show HTML
Vertical Disabled.
Try it out on Storybook Show HTML
Horizontal Icon Start.
Try it out on Storybook Show HTML
Vertical Icon Start.
Try it out on Storybook Show HTML
Horizontal Icon End.
Try it out on Storybook Show HTML
Vertical Icon End.
Try it out on Storybook Show HTML
Vertical Icon End Long Label.
Try it out on Storybook Show HTML
Horizontal With Error.
Try it out on Storybook Show HTML
Vertical With Error.
Try it out on Storybook Show HTML
Indeterminate Group.
Try it out on Storybook Show HTML
Horizontal Panel.
Try it out on Storybook Show HTML
Vertical Panel.
Try it out on Storybook Show HTML
Vertical To Horizontal Panel.
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Storybook with live examples Source code on GitHub

Documentation.

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.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

Angular overview Angular API Angular examples 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.