Selection controls wie Radio buttons, Checkboxs oder Switches ermöglichen dem User verschiedenste Optionsmöglichkeiten, Einstellungen oder Zustände zu steuern. Die Größe der Selection Controls ist abhängig von der jeweils verwendeten Basisschriftgröße gestaltet, die sich der jeweiligen Viewportbreite anpassen kann. Die Selection Controls stehen in Schwarz und Weiß zur Verfügung.

Checkbox

Checkboxen ermöglichen die Auswahl einer, keiner oder mehrerer Optionen. Zwischen mehreren Checkboxen einer Gruppe besteht keine Abhängigkeit. Jede Checkbox erhält ein Label.

HTML
<label class="aui-checkbox aui-js-checkbox">
  <input class="aui-checkbox__input" type="checkbox">
  <span class="aui-checkbox__label">Text</span>
</label>
<label class="aui-checkbox aui-js-checkbox">
  <input class="aui-checkbox__input" type="checkbox">
  <span class="aui-checkbox__label">Text</span>
</label>

Radio button

Radio Buttons ermöglichen die Auswahl einer unter mindestens zwei Optionen. Die Aktivierung eines Radiobuttons schließt somit die Aktivierung anderer Radio Buttons derselben Gruppe aus. Jeder Radio Button erhält ein Label.

HTML
<label class="aui-radio aui-js-radio">
  <input class="aui-radio__input" type="radio" name="sample-radio">
  <span class="aui-radio__label">Text</span>
</label>
<label class="aui-radio aui-js-radio">
  <input class="aui-radio__input" type="radio" name="sample-radio">
  <span class="aui-radio__label">Text</span>
</label>

Switch

Switch Controls werden für einfache Einstellungen genutzt und ermöglichen das Umschalten zwischen zwei verschiedenen Zuständen. Die verfügbaren Zustände werden durch ein Label kommuniziert. Das Label wird links, rechts oder beidseitig platziert.

HTML
<div>
  <label class="aui-switch aui-switch--text-left">
    <input type="checkbox" class="aui-switch__input">
    <span class="aui-switch__text">Label</span>
    <span class="aui-switch__track" aria-hidden="true">
      <span class="aui-switch__thumb"></span>
    </span>
  </label>
</div>
<div>
  <label class="aui-switch aui-switch--text-left">
    <input type="checkbox" class="aui-switch__input" checked>
    <span class="aui-switch__text">Label</span>
    <span class="aui-switch__track" aria-hidden="true">
      <span class="aui-switch__thumb"></span>
    </span>
  </label>
</div>
Audi UI Kit Sketch
Version 1.4 (Releases: https://github.com/audi/audi-templates/releases)
ZIP
76.3 MB

Examples

Dont´s

Radio Buttons ermöglichen lediglich die Auswahl einer unter mehreren Optionen.
Checkbox nicht auf Rot platzieren.
Die Verwendung von komplexen Fragestellungen und langen Texten vermeiden.