Toggles

Design
Entwicklung
  • Checkboxen

    Checkboxen werden verwendet, wenn der Nutzer eine beliebige Anzahl an Optionen auswählen darf.

  • Radio Boxen (Variante 1)

    Diese Variante der Radio-Boxen wird verwendet, wenn der Nutzer nur eine Optionen auswählen darf.

  • Radio Boxen (Variante 2)

    Radio-Boxen können auch anders aussehen. Insbesondere auf Mobilgeräten ist diese Gestaltung besser geeignet als die erste Variante.

    Sortierung
  • Toggle-Switch

    Während Checkboxen meist zum Bestätigen und Radio-Boxen zur Auswahl verwendet werden, sind Toggle-Switches zum Aktivieren/Deaktivieren von Funktionen zu gebrauchen.



Größen + Abstände
Checkboxen
sg_toggles_abstaende checkboxen
Radio-Boxen (Variante 1)
sg_toggles_abstaende radioboxen
Radio-Boxen (Variante 2)
sg_toggles_abstaende radio-boxen2
Toggle-Switch
sg_toggles_abstaende toggle_switch
Typischer Einsatz von Toggles
Checkboxen

Ein typischer Einsatz von Checkboxen ist die Auswahl der Kanäle, über die der Nutzer über Angebote informiert werden soll; auch für die Zustimmung der AGB/Datenschutzerklärung sind Checkboxen das Mittel der Wahl.

sg_toggles_beispiel checkboxen
Radio Boxen (Variante 1)

Ein typischer Einsatz dieser Variante ist die Newsletter-Abmeldung.

sg_toggles_beispiel radioboxen

Radio Boxen können aber auch zur Auswahl der Abo-Modelle auf der Paywall und im Aboshop eingesetzt werden.

sg_toggles_beispiel radioboxen2
Radio Boxen (Variante 2)

Ein typischer Einsatz dieser Variante ist die Filter bzw. Sortierungsfunktion auf der Ergebnisseite der internen Suche.

sg_toggles_beispiel radioboxen3
Toggle-Switch

Ein typischer Einsatz des Toggle-Switch ist die Aktivierung/Deaktivierung der Push Kanäle in der App.

sg_toggles_beispiel toggleswitch
Checkboxen

Bitte darauf achten, dass auch der Text der Checkbox klickbar ist.

<input type="checkbox" value="checkbox" id="checkbox2" name="checkbox">
<label for="checkbox2">Ja, ich stimme zu.</label>
input[type="checkbox"]{
    height: 11px;
    width: 11px;
    margin: 7px;
    position: absolute;
}
input[type="checkbox"]+label{
    position:relative;
    display:inline-block;
    padding: 2px 0 0 35px;
    cursor: pointer;
}
input[type="checkbox"]+label::before,
input[type="checkbox"]+label::after{
    content:'';
    display:inline;
    position:absolute;
    left:0;
    top:2px;
    height:23px;
    width:23px;
    border: 1px solid #DBDBDB;
    border-radius: 20px;
    background-color: #FFF;
}
input[type="checkbox"]+label::before,
input[type="checkbox"]+label::after{
    border-radius:0;
}
input[type="checkbox"]+label::after{
    display:none;
    background-image: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG
    5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3J
    nLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbDpzcGFjZT0i
    cHJlc2VydmUiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgY2xhc3M9Im5jLWljb24td3JhcHBlciIgZ
    mlsbD0iIzRiNGI0ZCI+PHBhdGggZmlsbD0iIzAwNmFiMiIgZD0iTTE0LjMsMi4zTDUsMTEuNkwxLjcsOC
    4zYy0wLjQtMC40LTEtMC40LTEuNCwwcy0wLjQsMSwwLDEuNGw0LDRDNC41LDEzLjksNC43LDE0LDUsMTR
    zMC41LTAuMSwwLjctMC4zIGwxMC0xMGMwLjQtMC40LDAuNC0xLDAtMS40UzE0LjcsMS45LDE0LjMsMi4z
    eiI+PC9wYXRoPjwvZz48L3N2Zz4=");
    background-repeat:no-repeat;
    background-position:center;
}
input[type="checkbox"]:checked+label::after{
    display:inline;
}
Radio-Boxen (Variante 1)

Bitte darauf achten, dass auch der Text der Radio-Box klickbar ist.

<input type="radio" value="radio1" id="radio1" name="radio">
<label for="radio1">Frau</label>
input[type="radio"] {
    height: 11px;
    width: 11px;
    margin: 7px;
    position: absolute;
}
input[type="radio"]+label {
    position:relative;
    display:inline-block;
    padding: 2px 0 0 35px;
    cursor: pointer;
}
input[type="radio"]+label::before,
input[type="radio"]+label::after {
    content:'';
    display:inline;
    position:absolute;
    left: 0;
    top:2px;
    height:23px;
    width:23px;
    border: 1px solid #DBDBDB;
    border-radius: 20px;
    background-color: #FFF;
}
input[type="radio"]+label::after{
    display:none;
    background-color: #006AB2;
    width: 15px;
    height: 15px;
    border: none;
}
input[type="radio"]:checked+label:after {
    display:inline;
}
input[type="radio"]:checked+label:after {
    margin: 4px;
}
Radio-Boxen (Variante 2)
    Sortierung 
<ul class="sort-checkbox">
    <span class="field-label">Sortierung</span>
    <li>
        <input type="radio" value="new" id="new" name="sort" checked>
        <label title="Neuste" for="new">Neuste</label>
    </li>
    <li>
        <input type="radio" value="old" id="old" name="sort">
        <label title="Älteste" for="old">Älteste</label>
    </li>
    <li>
        <input type="radio" value="best" id="best" name="sort">
        <label title="Relevanz" for="best">Relevanz</label>
    </li>
</ul>
.field-label {
    margin: 5px 0;
    display: block;
    text-align: left;
    text-transform: uppercase;
    font-size: 16px;
}
.sort-checkbox {
    list-style-type: none;
}
 
.sort-checkbox::after {
    content: "";
    clear: both;
    display: block;
}
 
.sort-checkbox li {
    float: left;
    display: block;
    box-sizing: border-box;
    border: 1px solid #DBDBDB;
    border-right:none;
    background-color: #FFFFFF;
    line-height: 0;
}
 
.sort-checkbox li:last-of-type {
    border: 1px solid #dbdbdb;
}
 
.sort-checkbox li label {
    box-sizing: border-box;
    height: 48px;
    font-size: 16px;
    line-height: 48px;
    text-align: center;
    padding: 0 20px;
    margin: 0;
}
 
.sort-checkbox input[type="radio"]+label::before,
.sort-checkbox input[type="radio"]+label::after,
.sort-checkbox input[type="radio"] {
    content: none;
    display: none;
    margin: 0;
}
 
.sort-checkbox input[type="radio"]+label::after {
    display: block;
    content: attr(title);
    font-weight: 500;
    height: 0;
    width: auto;
    visibility: hidden;
    overflow: hidden;
    position: relative;
}
 
.sort-checkbox input[type="radio"]:checked+label {
    background-color: #F7F7F7;
    font-weight: 500;
}
Toggle-Switch


<input id="check1" type="checkbox" class="switch-slider round">
<label for="check1">Label 1</label>
input.switch-slider {
    display: none;
}
 
input.switch-slider+label {
    padding: 0 0 0 47px;
}
 
input.switch-slider+label:before {
    display:block;
    width: 40px;
    height: 24px;
}
 
input.switch-slider+label:after,
input.switch-slider:checked+label:after{
    display: block;
    height: 20px;
    width: 20px;
    margin:2px;
    border:none;
    background: none;
    background-color: #dbdbdb;
    -webkit-transition: .2s;
    transition: .2s;
}
 
input.switch-slider:checked+label:after {
    background-color: #006ab2;
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}
 
input.switch-slider.round+label:before,
input.switch-slider.round+label:after{
    border-radius: 34px;
}
Labels ohne Markierung

Für Labels bietet es sich an, diese nicht markierbar zu setzten. Dies hat den Vorteil, dass beim setzten des Haken (Klick auf Label) nicht ausversehen der Text markiert wird. Hierfür steht die klasse .unselectable zur Verfügung. Unterstützt in der folgenden Form ab IE 10.

.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;  
  -ms-user-select: none;  
  user-select: none;       
}