Selection-Expansion-Panel. Overview

Preview.

Label Subtext CHF 40.00 %
Inner Content Link

What does the component do?

The selection expansion panel wraps a checkbox panel or a radio button panel and displays additional content for it.

When should the component be used?

  • When additional content should be displayed for an option, e.g. sub-options or information.

Similar component.

Selection-Action-Panel Usage

Rules.

  • The content opens as soon as the panel is selected. Alternatively, it is always displayed.
  • Clicking the content area does not change the selection.
  • Selection expansion panels are only used within a checkbox group or radio button group.
  • For an option with its own action, combine the selection expansion panel with the selection action panel.

Specification.

Open in Figma
Examples With Checkbox.
Try it out on Storybook Show HTML
With Radio Button.
Try it out on Storybook Show HTML
With Checkbox Size S.
Try it out on Storybook Show HTML
With Radio Button Size S.
Try it out on Storybook Show HTML
With Checkbox Checked.
Try it out on Storybook Show HTML
With Radio Button Checked.
Try it out on Storybook Show HTML
With Checkbox Disabled.
Try it out on Storybook Show HTML
With Radio Button Disabled.
Try it out on Storybook Show HTML
With Checkbox Checked Disabled.
Try it out on Storybook Show HTML
With Radio Button Checked Disabled.
Try it out on Storybook Show HTML
With Checkbox Group.
Try it out on Storybook Show HTML
With Radio Button Group.
Try it out on Storybook Show HTML
With Checkbox Group Size S.
Try it out on Storybook Show HTML
With Radio Button Group Size S.
Try it out on Storybook Show HTML
With Checkbox Group Force Open.
Try it out on Storybook Show HTML
With Radio Button Group Force Open.
Try it out on Storybook Show HTML
With Radio Button Group Allow Empty.
Try it out on Storybook Show HTML
With Checkbox Group Milk.
Try it out on Storybook Show HTML
With Radio Button Group Milk.
Try it out on Storybook Show HTML
With Checkbox Borderless.
Try it out on Storybook Show HTML
With Radio Button Borderless.
Try it out on Storybook Show HTML
With Checkbox Group Milk Borderless.
Try it out on Storybook Show HTML
With Radio Button Group Milk Borderless.
Try it out on Storybook Show HTML
With Checkboxes Error Message.
Try it out on Storybook Show HTML
With Radios Error Message.
Try it out on Storybook Show HTML
Tickets Options Example.
Try it out on Storybook Show HTML
Nested Radios.
Try it out on Storybook Show HTML
Nested Checkboxes.
Try it out on Storybook Show HTML
Nested Radios Size S.
Try it out on Storybook Show HTML
Nested Checkboxes Size S.
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-selection-expansion-panel> component wraps either a sbb-checkbox-panel
or a sbb-radio-button-panel that can toggle a content section.

The content section can be opened by checking <sbb-checkbox-panel> or selecting the <sbb-radio-button-panel>.
Additionally, clicking on all the upper area sets the checked state and therefore opens the content;
clicking on the content area does not toggle anything.

The selection panel can also be used inside a sbb-radio-button-group
or a sbb-checkbox-group.

With <sbb-radio-button-group>.
<sbb-radio-button-group>
  <sbb-selection-expansion-panel>
    <sbb-radio-button-panel>
      <sbb-card-badge>%</sbb-card-badge>
      Value
      <span slot="subtext">Subtext</span>
      <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-radio-button-panel>
    <div slot="content">Inner Content</div>
  </sbb-selection-expansion-panel>
</sbb-radio-button-group>
With <sbb-checkbox-group>.
<sbb-checkbox-group>
  <sbb-selection-expansion-panel>
    <sbb-checkbox-panel>
      <sbb-card-badge>%</sbb-card-badge>
      Value
      <span slot="subtext">Subtext</span>
      <span slot="suffix">
        <sbb-icon name="cross-small"></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>
    <div slot="content">Inner Content</div>
  </sbb-selection-expansion-panel>
</sbb-checkbox-group>
Style.

The component inherits its style from the slotted panel component (<sbb-checkbox-panel> or <sbb-radio-button-panel>).

Angular.

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

Angular overview Angular API Angular examples API

class: SbbSelectionExpansionPanelElement, sbb-selection-expansion-panel.

Properties.

Name Attribute Privacy Type Default Description
forceOpen force-open public boolean false Whether the content section is always visible.
group - public SbbRadioButtonGroupElement | SbbCheckboxGroupElement | null Group element if present
panel - public SbbCheckboxPanelElement | SbbRadioButtonPanelElement | null Input panel element

Events.

Name Type Description Inherited From
beforeclose Event Emits whenever the content section begins the closing transition.
beforeopen Event Emits whenever the content section starts the opening transition.
close Event Emits whenever the content section is closed.
open Event Emits whenever the content section is opened.

Slots.

Name Description
Use the unnamed slot to add sbb-checkbox-panel or sbb-radio-button-panel elements to the sbb-selection-expansion-panel.
content Use this slot to provide custom content for the panel (optional).