Radiobutton-❌
1. Was macht das Element?
- Dient zur Auswahl genau einer Option aus mehreren.
2. Wann soll das Element eingesetzt werden?
- Bei zwei und mehr Auswahlmöglichkeiten, bei der sich die Optionen gegenseitig ausschliessen.
3. Regeln
- Es müssen mindestens zwei Optionen zur Auswahl stehen.
- Eine Vorauswahl ist Pflicht.
- Für detaillierte Erklärungen kann neben dem Label ein Icon dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein .
- Radio Buttons können vertikal oder horizontal angeordnet werden. Die vertikale Anordnung wird bevorzugt, dadurch kann der Benutzer die Auswahlmöglichkeiten schneller erfassen.
- Horizontale Anordnung nur bei zwei bis drei Auswahlmöglichkeiten und kurzen Bezeichnungen.
- Der Text kann mehrzeilig sein.
- Nebst dem eigentlichen Radiobutton dient auch der gesamte Text als Click-Target.
4. Ausprägungen und Zustände
Das Element hat folgende Zustände:
- Checked
- Unchecked
- Disabled Checked
- Disbaled Unchecked
Das Element hat folgende Ausprägungen:
- volle Breite
- mit Preis
- dynamische Breite
4.1 Volle Breite
4.1.1 Default
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
4.1.2 Ohne Icon (vor Label)
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
4.1.3 Ohne Call to Action
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
4.1.4 Nur Radiobutton und Label
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
4.2 Mit Preis
4.2.1 Default
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
4.2.2 Ohne Icon (vor Label)
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
4.2.3 Ohne Spar-Icon
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
4.2.4 Nur Radiobutton, Label und Preis
Design Spezifikation
- Checked: Light, Dark
- Unchecked: Light, Dark
- Disabled Checked: Light, Dark
- Disabled Unchecked: Light, Dark
4.3 Dynamische Breite
Design Spezifikation
1. Was macht das Element?
- Dient zur Auswahl genau einer Option aus mehreren.
2. Wann soll das Element eingesetzt werden?
- Bei zwei und mehr Auswahlmöglichkeiten, bei der sich die Optionen gegenseitig ausschliessen.
3. Regeln
- Es müssen mindestens zwei Optionen zur Auswahl stehen.
- Eine Vorauswahl ist Pflicht.
- Für detaillierte Erklärungen kann neben dem Label ein Icon dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein .
- Radio Buttons können vertikal oder horizontal angeordnet werden. Die vertikale Anordnung wird bevorzugt, dadurch kann der Benutzer die Auswahlmöglichkeiten schneller erfassen.
- Horizontale Anordnung nur bei zwei bis drei Auswahlmöglichkeiten und kurzen Bezeichnungen.
- Der Text kann mehrzeilig sein.
- Nebst dem eigentlichen Radiobutton dient auch der gesamte Text als Click-Target.
4. Ausprägungen und Zustände
Das Element hat folgende Zustände:
Das Element hat folgende Ausprägungen:
- mit Info (nur bei vertikaler Ausrichtung)
- ohne Info
- vertikal ausgerichtet
- horizontal ausgerichtet
4.1 Vertikale Anordnung
Design Spezifikation
4.2 Horizontale Anordnung
