Zur Navigation Zum Inhalt Kontakt Menu Komponente finden Übersicht Lyne Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Design Tokens Komponenten Übersicht Basis Informationen Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons
Komponente finden

Lyne

Basics Animation

Animation

Border

Border

Grid

Grid

Spacings

Spacings

Typografie

Typografie

Components Action-Group

Action-Group

Alert

Alert

Alert-Group

Alert-Group

Autocomplete

Autocomplete

Button

Button

Calendar

Calendar

Card

Card

Card-Badge

Card-Badge

Checkbox

Checkbox

Checkbox-Group

Checkbox-Group

Chip

Chip

Clock

Clock

Datepicker

Datepicker

Dialog

Dialog

Divider

Divider

Footer

Footer

Form-Error

Form-Error

Form-Field

Form-Field

Header

Header

Header-Action

Header-Action

Icon

Icon

Image

Image

Journey-Header

Journey-Header

Link

Link

Link-List

Link-List

Logo

Logo

Menu

Menu

Menu-Action

Menu-Action

Radio-Button

Radio-Button

Radio-Button-Group

Radio-Button-Group

Selection-Panel

Selection-Panel

Signet

Signet

Slider

Slider

Tab-Group

Tab-Group

Tab Title

Tab Title

Tag

Tag

Tag-Group

Tag-Group

Teaser

Teaser

Teaser-Hero

Teaser-Hero

Time-Input

Time-Input

Title

Title

Toggle

Toggle

Toggle-Check

Toggle-Check

Tooltip

Tooltip

Tooltip-Trigger

Tooltip-Trigger

Selection-Panel Implementation

The sbb-selection-panel component wraps either a sbb-checkbox or a sbb-radio-button that can optionally toggle a content section.

The content section can be opened by checking the checkbox or if radio is selected. Additionally, clicking on all the upper area sets the checked state and therefore open 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 radio button group

<sbb-radio-button-group>
<sbb-selection-panel>
<sbb-card-badge>
<span>%</span>
<span>from CHF</span>
<span>19.99</span>
</sbb-card-badge>
<sbb-radio-button>
Value
<span slot="subtext">Subtext</span>
<span slot="suffix">
<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>
<div slot="content">
Inner Content
</div>
</sbb-selection-panel>
</sbb-radio-button-group>

With checkbox group

<sbb-checkbox-group>
<sbb-selection-panel>
<sbb-card-badge>
<span>%</span>
<span>from CHF</span>
<span>19.99</span>
</sbb-card-badge>
<sbb-checkbox>
Value
<span slot="subtext">Subtext</span>
<span slot="suffix">
<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>
<div slot="content">
Inner Content
</div>
</sbb-selection-panel>
</sbb-checkbox-group>

As shown in the examples above, sbb-checkbox and sbb-radio-button placed in a sbb-selection-panel are extended with a slot named "subtext" for the subtext and a slot named "suffix" for the suffix items.

Properties

Property Attribute Description Type Default
borderless borderless Whether the unselected panel has a border. boolean false
color color The background color of the panel. "milk" | "white" 'white'
disableAnimation disable-animation Whether the animation is enabled. boolean false
forceOpen force-open Whether the content section is always visible. boolean false

Events

Event Description Type
did-close Emits whenever the content section is closed. CustomEvent<{ closeTarget: HTMLElement; }>
did-open Emits whenever the content section is opened. CustomEvent<void>
will-close Emits whenever the content section begins the closing transition. CustomEvent<{ closeTarget: HTMLElement; }>
will-open Emits whenever the content section starts the opening transition. CustomEvent<void>

Slots

Slot Description
"badge" Use this slot to provide a sbb-card-badge (optional).
"content" Use this slot to provide custom content for the panel (optional).
"unnamed" Use this slot to provide a sbb-checkbox or a sbb-radio-button.

Dependencies

Depends on

Graph

graph TD;
sbb-selection-panel --> sbb-divider
style sbb-selection-panel fill:#f9f,stroke:#333,stroke-width:4px

Demo
%
Value oneSubtextCHF 40.00
Inner ContentLink
Radiobutton Checkbox
White Milk
Nein Ja
Nein Ja
Nein Ja
Nein Ja
White Milk Iron Charcoal Black
Mehr Beispiele auf Storybook
Impressum Kontakt Cookie Einstellungen