Preview.

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.

Similar component.

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.

The <sbb-selection-action-panel> component wraps either a sbb-checkbox-panel
or a sbb-radio-button-panel and an action element (e.g. an <sbb-secondary-button> or a native button).

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

  <!-- action -->
  <sbb-secondary-button icon-name="arrow-right-small">...</sbb-secondary-button>
  <!-- or -->
  <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.

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

  <!-- inner content -->
  <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
or a sbb-checkbox-group.

With <sbb-radio-button-group>:

<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>:

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

Angular.

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

class: SbbSelectionActionPanelElement, sbb-selection-action-panel.

Properties.

Slots.