# Selection-Action-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-action-panel/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-selection-action-panel--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/selection-action-panel/overview (API: https://lyne-angular.app.sbb.ch/angular/components/selection-action-panel/api)
- GitHub: https://github.com/sbb-design-systems/lyne-components

## Elements

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

## Related components

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

## Overview

### What does the component do?
The selection action panel combines a checkbox panel or a radio button panel with an action, e.g. a button. Users can select an option and directly trigger a related action.

### When should the component be used?
* When an option has its own action, e.g. showing details or editing the option.
* When options and actions are to be displayed together in a list.

### Rules.
* Selection action panels are used inside a checkbox group or radio button group.
* Each panel has exactly one action. It must be clearly distinguishable from selecting the option.
* The action should have a clear label. An icon-only button needs a label for screen readers.
* If additional content should expand, combine the selection action panel with the selection expansion panel.

## Implementation (web components)

The `<sbb-selection-action-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) and an action element (e.g. an `<sbb-secondary-button>` or a native `button`).

```html
<sbb-selection-action-panel>
  <sbb-radio-button-panel>
    Value
    <span slot="subtext">Subtext</span>
  </sbb-radio-button-panel>

  
  <sbb-secondary-button icon-name="arrow-right-small">...</sbb-secondary-button>
  
  <button class="sbb-action">...</button>
</sbb-selection-action-panel>
```

### With expansion panel

It is possible to combine the usage of the `<sbb-selection-action-panel>` and the [sbb-selection-expansion-panel](https://lyne-elements.app.sbb.ch/?path=/docs/elements-selection-expansion-panel--docs).

```html
<sbb-selection-expansion-panel>
  <sbb-selection-action-panel>
    <sbb-radio-button-panel color="milk" borderless>
      Value
      <span slot="subtext">Subtext</span>
    </sbb-radio-button-panel>

    <sbb-secondary-button icon-name="arrow-right-small">...</sbb-secondary-button>
  </sbb-selection-action-panel>

  
  <div slot="content">Inner Content</div>
</sbb-selection-expansion-panel>
```

### In a group

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-action-panel>
    <sbb-radio-button-panel>
      Value
      <span slot="subtext">Subtext</span>
    </sbb-radio-button-panel>
    <sbb-secondary-button icon-name="arrow-right-small"></sbb-secondary-button>
    <sbb-card-badge>%</sbb-card-badge>
  </sbb-selection-action-panel>
  ...
</sbb-radio-button-group>
```

With `<sbb-checkbox-group>`:

```html
<sbb-checkbox-group>
  <sbb-selection-action-panel>
    <sbb-checkbox-panel>
      Value
      <span slot="subtext">Subtext</span>
    </sbb-checkbox-panel>
    <sbb-secondary-button icon-name="arrow-right-small"></sbb-secondary-button>
    <sbb-card-badge>%</sbb-card-badge>
  </sbb-selection-action-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)

#### class: `SbbSelectionActionPanelElement`, `sbb-selection-action-panel`

##### Properties

| Name    | Attribute | Privacy | Type                                                            | Default | Description              |
| ------- | --------- | ------- | --------------------------------------------------------------- | ------- | ------------------------ |
| `group` | -         | public  | `SbbRadioButtonGroupElement \| SbbCheckboxGroupElement \| null` |         | Group element if present |
| `panel` | -         | public  | `SbbCheckboxPanelElement \| SbbRadioButtonPanelElement \| null` |         | Input panel element      |

##### Slots

| Name    | Description                                                                                                |
| ------- | ---------------------------------------------------------------------------------------------------------- |
|         | Use this slot to render a `sbb-checkbox-panel` or `sbb-radio-button-panel` element and the action element. |
| `badge` | Use this slot to render a `sbb-card-badge` component.                                                      |