# Radio-Button

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/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-radio-button--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/radio-button/overview (API: https://lyne-angular.app.sbb.ch/angular/components/radio-button/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-48
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/radio-button

## Elemente

- `sbb-radio-button`: It displays a radio button enhanced with the SBB Design.

## Verwandte Komponenten

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

## Übersicht

### Was macht die Komponente?
Ein Radio-Button ermöglicht es Nutzenden, eine Auswahl aus einer Gruppe von Optionen zu treffen, wobei immer nur eine Option zur gleichen Zeit ausgewählt werden kann.

### Wann soll die Komponente eingesetzt werden?
* Wenn Nutzende eine Auswahl aus einer begrenzten Anzahl von Optionen treffen sollen.
* Wenn nur eine Option aus mehreren möglichen ausgewählt werden darf.

### Regeln.
* Radio-Buttons sollen in Gruppen ([Radio-Button-Group](https://digital.sbb.ch/de/design-system/lyne/components/radio-button-group/)) verwendet werden, um eine klare Auswahlmöglichkeit zu bieten.
* Jede Option innerhalb einer Gruppe von Radio-Buttons soll eindeutig beschriftet und leicht verständlich sein.
* Vermeide es, zu viele Optionen in einer Radio-Button-Gruppe zu platzieren, um die Übersichtlichkeit zu gewährleisten und die Auswahl zu erleichtern.

## Implementation (Web Components, Englisch)

The `<sbb-radio-button>` component provides the same functionality as a native `<input type="radio"/>` enhanced with the SBB Design.

Radio-buttons should typically be placed inside a [sbb-radio-button-group](https://lyne-elements.app.sbb.ch/?path=/docs/elements-radio-button-group--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 value="Value one">Option one</sbb-radio-button>
  <sbb-radio-button value="Value two">Option two</sbb-radio-button>
</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 name="radio-group" value="Value one" checked>Option one</sbb-radio-button>
<sbb-radio-button name="radio-group" value="Value two">Option two</sbb-radio-button>
```

### States

It is possible to display the component in `disabled` or `checked` state by using the self-named properties.

The component has a `required` property, which can be useful
for setting a custom [sbb-error](https://lyne-elements.app.sbb.ch/?path=/docs/elements-form-field--docs) message
within a [sbb-form-field](https://lyne-elements.app.sbb.ch/?path=/docs/elements-form-field--docs).

The `allowEmptySelection` property allows user to deselect the component.

```html
<sbb-radio-button value="One" checked>Option one</sbb-radio-button>

<sbb-radio-button value="Two" disabled>Option two</sbb-radio-button>

<sbb-radio-button value="Three" required>Option three</sbb-radio-button>

<sbb-radio-button value="Four" allowEmptySelection>Option four</sbb-radio-button>
```

### 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 value="small" size="s">Size</sbb-radio-button>
```

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

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

### Complex Values

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

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

## API (Web Components, Englisch)

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