# Radio-Button-Panel

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Form
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/radio-button-panel/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-radio-button-panel--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/radio-button-panel/overview (API: https://lyne-angular.app.sbb.ch/angular/components/radio-button-panel/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=31104-609908
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/radio-button-panel

## Elemente

- `sbb-radio-button-panel`: It displays a radio button enhanced with the panel design.

## Verwandte Komponenten

- Ähnlich: [Checkbox-Panel](https://digital.sbb.ch/de/design-system/lyne/components/checkbox-panel/index.md), [Radio-Button](https://digital.sbb.ch/de/design-system/lyne/components/radio-button/index.md)

## Übersicht

### Was macht die Komponente?
Das Radio-Button-Panel erfüllt die gleiche Aufgabe wie der [Radio-Button](https://digital.sbb.ch/de/design-system/lyne/components/radio-button/). Zusätzlich bietet es Platz für Subtext, Card-Badge, Icon oder Suffix.

### Wann soll die Komponente eingesetzt werden?
* Wenn Nutzende genau eine Option aus einer begrenzten Anzahl von Optionen wählen sollen.
* Wenn der normale Radio-Button zur Beschreibung der Option nicht ausreicht, z.B. wegen Subtext, Icon oder Card-Badge.
* Wenn das Panel besser ins Layout passt als der normale Radio-Button.
* Wenn unterhalb der Option frei wählbarer Inhalt angezeigt werden soll: Radio-Button-Panel mit dem [Selection-Expansion-Panel](https://digital.sbb.ch/de/design-system/lyne/components/selection-expansion-panel/) kombinieren.
* Wenn zur Option eine eigene Aktion gehört: Radio-Button-Panel mit dem [Selection-Action-Panel](https://digital.sbb.ch/de/design-system/lyne/components/selection-action-panel/) kombinieren.

### Regeln.
* Radio-Button-Panels werden in einer [Radio-Button-Group](https://digital.sbb.ch/de/design-system/lyne/components/radio-button-group/) eingesetzt.
* Jede Option ist eindeutig beschriftet und leicht verständlich.
* Vermeide zu viele Optionen in einer Gruppe.
* Vermeide zu viel Inhalt pro Panel. So bleibt es gut lesbar.

## Implementation (Web Components, Englisch)

The `<sbb-radio-button-panel>` component provides the same functionality as a native `<input type="radio"/>` enhanced with the selection panel design and functionalities.

Radio-buttons should typically be placed inside a [sbb-radio-button-group](https://lyne-elements.app.sbb.ch/?path=/docs/elements-radio-button--docs) component
in order to display a radio input within a group. Individual radio-buttons inside a radio-group will inherit the `name` of the group.

```html
<sbb-radio-button-group name="radio-group" value="Value one" aria-label="Radio group label">
  <sbb-radio-button-panel value="Value one">Option one</sbb-radio-button-panel>
  <sbb-radio-button-panel value="Value two">Option two</sbb-radio-button-panel>
</sbb-radio-button-group>
```

In cases where that's not possible, you can define a group of radios using the same `name` property

```html
<sbb-radio-button-panel name="radio-group" value="Value one">Option one</sbb-radio-button-panel>
<sbb-radio-button-panel name="radio-group" value="Value two">Option two</sbb-radio-button-panel>
```

### Slots

It is possible to provide a label via an unnamed slot;
additionally the slots named `subtext` can be used to provide a subtext and
the slot named `suffix` can be used to provide suffix items.
If you use a `<sbb-card-badge>`, the slot `badge` is automatically assigned.

```html
<sbb-radio-button-panel>
  <sbb-card-badge>%</sbb-card-badge>
  Label
  <span slot="subtext">Subtext</span>
  <span slot="suffix">Suffix</span>
</sbb-radio-button-panel>
```

### States

It is possible to display the component in `disabled` or `checked` state by using the self-named properties.
The `allowEmptySelection` property allows user to deselect the component.

```html
<sbb-radio-button-panel value="One" checked>Option one</sbb-radio-button-panel>
<sbb-radio-button-panel value="Two" disabled>Option two</sbb-radio-button-panel>
<sbb-radio-button-panel value="Three" allowEmptySelection>Option three</sbb-radio-button-panel>
```

### Style

The component has three different sizes, which can be changed using the `size` property (`xs`, `s` or `m`).
If used inside a `<sbb-radio-button-group>`, the `size` will be inherited from it.

```html
<sbb-radio-button-panel size="s">Size</sbb-radio-button-panel>
```

The component's label can be displayed in bold using the `sbb-text--bold` class on a wrapper tag:

```html
<sbb-radio-button-panel value="bold">
  <span class="sbb-text--bold">Bold label</span>
</sbb-radio-button-panel>
```

### Complex Values

This component supports any types of values, including complex objects.
The type can be specified using the generic type parameter `T` of `SbbRadioButtonPanel<T>`.

```html
<sbb-radio-button-panel .value=${{value: 'value', name: 'name'}} name="name">Option</sbb-radio-button-panel>
```

## API (Web Components, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/radio-button-panel/api.md