Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Übersicht Basis Komponenten Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons Radiobutton

Übersicht

Was macht die Komponente?

  • Dient zur Auswahl genau einer Option aus mehreren.

Wann soll die Komponente eingesetzt werden?

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

Regeln

  • Es müssen mindestens zwei Optionen zur Auswahl stehen.
  • Eine Vorauswahl ist Pflicht.
  • Radio Buttons können vertikal oder horizontal angeordnet werden. Die vertikale Anordnung wird bevorzugt, dadurch können die Benutzenden 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.
Varianten

Zustände

DIe Komponente hat folgende Zustände:

  • Checked
  • Unchecked
  • Disabled checked
  • Disabled unchecked
  • Loading

Varianten

Die Komponente hat folgende Varianten:

  • Radiobutton
    • ohne Icon / mit Icon
  • Radiobutton-Item
    • listed / boxed
    • ohne Icon / mit Icon
    • ohne Subtext / mit Subtext
    • ohne Button / mit Button

Radiobutton

ohne Icon

Darstellung des Radiobuttons ohne Icon
Darstellung des Radiobuttons ohne Icon

mit Icon

Darstellung des Radiobuttons mit Icon
Darstellung des Radiobuttons mit Icon

Radiobutton-Item

Liste

Darstellung des Radiobutton-Items in einer Liste
Darstellung des Radiobutton-Items in einer Liste

Liste, mit Icons (links und rechts)

Darstellung Radiobutton-Items in einer Liste mit Icon
Darstellung Radiobutton-Items in einer Liste mit Icon

Liste, mit Subtext

Darstellung des Radiobutton-Items in einer Liste mit Subtext
Darstellung des Radiobutton-Items in einer Liste mit Subtext

Liste, mit Button

Darstellung des Radiobutton-Items in einer Liste mit Button
Darstellung des Radiobutton-Items in einer Liste mit Button

Liste, ladend

Darstellung des Radiobutton-Items in einer Liste ladend
Darstellung des Radiobutton-Items in einer Liste ladend

Boxed

Darstellung des Radiobutton-Items in einer Box
Darstellung des Radiobutton-Items in einer Box

Boxed, mit Icons (links und rechts)

Darstellung des Radiobutton-Items in einer Box mit Icon
Darstellung des Radiobutton-Items in einer Box mit Icon

Boxed, mit Subtext

Darstellung des Radiobutton-Items in einer Box mit Subtext
Darstellung des Radiobutton-Items in einer Box mit Subtext

Boxed, mit Button

Darstellung des Radiobutton-Items in einer Box mit Button
Darstellung des Radiobutton-Items in einer Box mit Button

Boxed, ladend

Darstellung des Radiobutton-Items in einer Box ladend
Darstellung des Radiobutton-Items in einer Box ladend

Spezifikationen

Design

Impressum Kontakt Datenschutz Cookie Einstellungen