Selection-Expansion-Panel. Info

What does the component do?

It is wrapped around a Checkbox-Panel or a radio Radio-Button-Panel and offers the option of displaying additional content for the panels.

When should the component be used?

  • If additional content (e.g. for sub-options, information) is to be displayed for a Checkbox-Panel or a Radio-Button-Panel.

Rules.

  • The additional content (per panel) can always be displayed or only in the selected state.
  • Selection expansion panels should only be used within Checkbox-Groups and Radio-Button-Groups.
Checkbox-Panel Radio-Button-Panel
Anatomy

Anatomy of the component


Number Type Description Optional Info
1a Component sbb-checkbox-panel No
1b Component sbb-radio-button-panel No
2 Slot For additional content No
Demo

Playground.

Label Subtext CHF 40.00 %
Inner Content Link
Color White Milk Always show content No Yes Sizes S M Mode (System Setting) Light Dark Background White Midnight Milk Charcoal Cloud Iron Midnight White Charcoal Milk Iron Cloud
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

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>).

API Documentation.

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).