# Selection-Expansion-Panel

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: one element
- Categories: Form
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/design-system/lyne/components/selection-expansion-panel/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-selection-expansion-panel--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/selection-expansion-panel/overview (API: https://lyne-angular.app.sbb.ch/angular/components/selection-expansion-panel/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=31104-455663
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/selection-expansion-panel

## Elements

- `sbb-selection-expansion-panel`: It displays an expandable panel connected to a `sbb-checkbox` or to a `sbb-radio-button`.

## Related components

- Similar: [Selection-Action-Panel](https://digital.sbb.ch/en/design-system/lyne/components/selection-action-panel/index.md)

## Overview

### What does the component do?
The selection expansion panel wraps a [checkbox panel](https://digital.sbb.ch/en/design-system/lyne/components/checkbox-panel/) or a [radio button panel](https://digital.sbb.ch/en/design-system/lyne/components/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.

### 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](https://digital.sbb.ch/en/design-system/lyne/components/checkbox-group/) or [radio button group](https://digital.sbb.ch/en/design-system/lyne/components/radio-button-group/).
* For an option with its own action, combine the selection expansion panel with the [selection action panel](https://digital.sbb.ch/en/design-system/lyne/components/selection-action-panel/).

## Implementation (web components)

The `<sbb-selection-expansion-panel>` component wraps either a [sbb-checkbox-panel](https://lyne-elements.app.sbb.ch/?path=/docs/elements-checkbox-panel--docs)
or a [sbb-radio-button-panel](https://lyne-elements.app.sbb.ch/?path=/docs/elements-radio-button-panel--docs) 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](https://lyne-elements.app.sbb.ch/?path=/docs/elements-radio-button-group--docs)
or a [sbb-checkbox-group](https://lyne-elements.app.sbb.ch/?path=/docs/elements-checkbox-group--docs).

#### With `<sbb-radio-button-group>`

```html
<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>`

```html
<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 (web components)

Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/selection-expansion-panel/api.md