1. Was macht die Komponente?

• Dient zur Auswahl genau einer Option aus mehreren.

2. Wann soll die Komponente eingesetzt werden?

• Bei zwei und mehr Auswahlmöglichkeiten, bei der sich die Optionen gegenseitig ausschliessen.

3. Regeln

• Ein Radiobutton ist nur innerhalb eines Formulars erlaubt.
• Es müssen mindestens zwei Optionen zur Auswahl stehen.
• Eine Vorauswahl ist Pflicht.
• Radiobuttons können vertikal oder horizontal angeordnet werden. Die vertikale Anordnung wird bevorzugt, dadurch können die Benutzer*innen die Auswahlmöglichkeiten schneller erfassen.
• Der Text kann mehrzeilig sein.
• Nebst dem eigentlichen Radiobutton dient auch der gesamte Text als Click-Target.
• Oberhalb einer Radiobutton-Gruppe kann ein Titel eingesetzt werden.
• Für detaillierte Erklärungen zu einer Radiobutton-Gruppe kann neben dem Titel ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip.

4. Ausprägungen und Zustände

Die Komponente hat folgende Zustände:

• Checked
• Unchecked
• Focused Checked
• Focused Unchecked
• Disabled Checked
• Disabled Unchecked

4.1 Standard

Design Spezifikation

• Checked
• Unchecked
• Focused checked
• Focused unchecked
• Disabled checked
• Disabled unchecked

Code Spezifikation

• SBB Angular Component Library