Components Radio-Buttons Auswahlknopf

Status-Info: Backlog
Design System Barrierefreiheit Fertigstellungsgrad
100% V25 100% 100%

Radio Buttons ermöglichen es dem Benutzer, alle verfügbaren Optionen auf einmal zu sehen und genau eine Option auszuwählen.

Richtlinien

  • Verwenden Sie Checkboxen und Radio-Buttons nur, um Einstellungen zu verändern, und nicht als Aktionsschalter zur Auslösung von irgendetwas.
  • Ermöglichen Sie eine Auswahl sowohl durch Anklicken des Buttons bzw. der Box selbst als auch durch Anklicken der dazugehörigen Beschriftung.
  • Bieten Sie für Radio-Button-Listen immer eine Vorauswahl an. Per Definition ist bei Radio-Buttons immer genau eine Option ausgewählt, deshalb sollten Sie sie nicht ohne eine Vorauswahl anzeigen. (Checkboxen dagegen erscheinen meist ohne Vorauswahl.)
  • Falls die Nutzer die Möglichkeit haben sollen, eine Auswahl zu überspringen, müssen Sie einen Radio-Button für diese Option anbieten - etwa einen mit der Aufschrift "Nichts dergleichen".

Radio-Button Zustände

Standard

Optional

Label - Optional 

    Label - Optional

Selected

Keyboard Focus

Radios dürfen das readonly attribure nicht haben!

Disabled

Disabled selected

Radios dürfen das readonly attribure nicht haben!

Readonly

Readonly selected

Error

Barrierefreiheit Info

Elemente mit Error und Hint Meldungen müssen mit aria-describedby="error-id hint-id" Attribut ausgezeihnet werden!

Example:
<fieldset aria-describedby="xxx">
Lorem Ipsum

Fusce posuere


    Lorem Ipsum
    
Fusce posuere

Vertikal List

Label 

    Label

Vertikale Liste Alternative

Die optische Trennung der letzten Option mit "oder" unterstützt die Barrierefreiheit.

Label

oder




    Label
    

        

            
            
        

        

            
            
        

        
oder

Horizontale Liste

Label 

    Label

Hint für Horizontale Anordnung

In bestimmten Fällen sollte keine Vorauswahl aktiv sein, um Diskriminierungen zu vermeiden.

Barrierefreiheit Info

Elemente mit Hint Meldung müssen mit aria-describedby="hint-id" Attribut ausgezeihnet werden!

Example:
<fieldset aria-describedby="xxx">
Lorem Ipsum

Fusce posuere




    Lorem Ipsum
    
Fusce posuere

Error, Hint für vertikale Liste

Barrierefreiheit Info

Elemente mit Error und Hint Meldungen müssen mit aria-describedby="error-id hint-id" Attribut ausgezeihnet werden!

Example:
<fieldset aria-describedby="xxx">
Lorem Ipsum

Fusce posuere


    Lorem Ipsum
    
Fusce posuere

Wählen Sie Ihren Antragsart

Für kontinuierliche Schichtbetriebe zur Erreichung zusätzlicher Freischichten.
Für Bau- und Montagestellen.
Wenn die Verlängerung der Arbeitszeit über acht Stunden werktäglich durch eine entsprechende Verkürzung der Arbeitszeit zu anderen Zeiten ausgeglichen wird.
Bei Arbeitsbereitschaft, Bereitschaftsdienst und Rufbereitschaft den Besonderheiten dieser Inanspruchnahmen im öffentlichen Dienst entsprechend.
Zur Herbeiführung eines regelmäßigen wöchentlichen Schichtwechsels zweimal innerhalb eines Zeitraums von drei Wochen.
Ausnahmen können für Arbeit im öffentlichen Interesse zugelassen werden.

    

        

            
            
            
Für kontinuierliche Schichtbetriebe zur Erreichung zusätzlicher Freischichten.

        

        

            
            
            
Für Bau- und Montagestellen.

        

        

            
            
            
Wenn die Verlängerung der Arbeitszeit über acht Stunden werktäglich durch eine entsprechende Verkürzung der Arbeitszeit zu anderen Zeiten ausgeglichen wird.

        

        

            
            
            
Bei Arbeitsbereitschaft, Bereitschaftsdienst und Rufbereitschaft den Besonderheiten dieser Inanspruchnahmen im öffentlichen Dienst entsprechend.

        

        

            
            
            
Zur Herbeiführung eines regelmäßigen wöchentlichen Schichtwechsels zweimal innerhalb eines Zeitraums von drei Wochen.

        

        

            
            
            
Ausnahmen können für Arbeit im öffentlichen Interesse zugelassen werden.

OSI Hilfe Dialog