DK97 UI

Radio

Radio Buttons ermöglichen die Auswahl genau einer Option aus einer Gruppe.

Beispiele

Basic 


<label class="a-radio">
    <input
        class="a-radio__input"
        type="radio"
        name="basic">

    <span class="a-radio__circle"></span>

    <span class="a-radio__label">
        Blau
    </span>
</label>

Checked 


<label class="a-radio">
    <input
        class="a-radio__input"
        type="radio"
        name="checked"
        checked>

    <span class="a-radio__circle"></span>

    <span class="a-radio__label">
        Blau
    </span>
</label>

Disabled 


<label class="a-radio">
    <input
        class="a-radio__input"
        type="radio"
        name="disabled"
        disabled>

    <span class="a-radio__circle"></span>

    <span class="a-radio__label">
        Nicht verfügbar
    </span>
</label>

Radio Group 


<div class="m-form-group">
    <label class="m-form-group__label">
        Farbe
    </label>

    <label class="a-radio">
        <input class="a-radio__input" type="radio" name="color" checked>
        <span class="a-radio__circle"></span>
        <span class="a-radio__label">Blau</span>
    </label>

    <label class="a-radio">
        <input class="a-radio__input" type="radio" name="color">
        <span class="a-radio__circle"></span>
        <span class="a-radio__label">Grün</span>
    </label>

    <label class="a-radio">
        <input class="a-radio__input" type="radio" name="color">
        <span class="a-radio__circle"></span>
        <span class="a-radio__label">Rot</span>
    </label>
</div>

Klassen

Klasse Beschreibung
.a-radio Container der Radio-Komponente.
.a-radio__input Das eigentliche Radio-Input.
.a-radio__circle Der sichtbare Radio Button.
.a-radio__label Beschriftung des Radio Buttons.

Hinweise

Hinweis
Radios werden verwendet, wenn genau eine Option aus einer Gruppe gewählt werden darf.

Best Practices

Empfohlene Verwendung
Verwende Radios für exklusive Entscheidungen mit wenigen Optionen.
Vermeiden
Für unabhängige Ein/Aus-Optionen sollten Checkboxen verwendet werden.

Accessibility

Gruppierung
Radios sollten logisch gruppiert und mit demselben name-Attribut versehen werden.