400 #permalink Formulare

Example

Markup

<form>
  <label class="textfield">
    <input type="text" />
    <span class="textfield__label">Name</span>
  </label>
  <label class="radio">
    <input type="radio" name="example" />
    <span class="radio__label">Desktop</span>
  </label>
  <label class="radio">
    <input type="radio" name="example" />
    <span class="radio__label">Mobile</span>
  </label>
  <label class="select">
    <select name="select">
      <option disabled="disabled" selected="selected">Bitte wählen</option>
      <option>MS Amadea</option>
      <option>MS Amera</option>
      <option>MS Artania</option>
      <option>MS Albatros</option>
      <option>MS Deutschland</option>
    </select>
    <span class="select__label" for="select">Lieblingsschiff</span>
  </label>
  <label class="textfield">
    <textarea></textarea>
    <span class="textfield__label">Comments</span>
  </label>
  <label class="checkbox">
    <input type="checkbox" />
    <span class="checkbox__label">Check mich!</span>
  </label>
  <br/>
  <div class="mt3">
    <input class="btn btn--primary" type="submit" value="Abschicken" />
    <button class="btn btn--primary" disabled="disabled">
      <i class="fas fa-spinner fa-spin mr1"></i> Abschicken
    </button>
    <button class="btn btn--success" disabled="disabled">
      <i class="fas fa-check mr1"></i> Gekauft
    </button>
    <button class="btn btn--secondary">Abbrechen</button>
  </div>
  <div class="mt3">
    <button class="btn btn--warning">Löschen</button>
    <button class="btn btn--danger">Alles löschen</button>
    <button class="btn btn--link"><i class="fas fa-home mr1"></i> Zurück</button>
  </div>
</form>

Source: components/_forms.scss, line 1

400.1 #permalink Radio

Examples

Default styling

Radio

.disabled

disabled

Radio

Markup

<label class="radio [modifier class]">
  <input
    type="radio"
    name=""
    value=""
    checked=""
    onclick=""
  />
  <span class="radio__label">Radio</span>
</label>

Source: components/_forms.scss, line 242

400.2 #permalink Checkbox

Examples

Default styling

Checkbox

.disabled

disabled

Checkbox

Markup

<label class="checkbox [modifier class]">
  <input
    name=""
    value=""
    checked=""
    onclick=""
    type="checkbox"
  />
  <span class="checkbox__label">
    Checkbox
  </span>
</label>

Source: components/_forms.scss, line 280

400.3 #permalink Checkbox - Switch

Example

Licht an oder aus, das ist hier die Frage. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam

Markup

<label class="switch">
  <span class="switch__input">
    <input
      name=""
      value=""
      checked=""
      onclick=""
      type="checkbox"
    />
    <span class="switch__slider"></span>
  </span>
  <span class="switch__label">
    Licht an oder aus, das ist hier die Frage. Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  </span>
</label>

Source: components/_forms.scss, line 321

400.4 #permalink Input & Textareas

Examples

Default styling

Input Textarea

.disabled

disabled

Input Textarea

Markup

<label class="textfield [modifier class]">
  <input
    type="text"
    name=""
    value=""
    oninput=""
    maxlength=""
    autocomplete=""
    placeholder="..."
  />
  <span class="textfield__label">Input</span>
</label>
<label class="textfield [modifier class]">
  <textarea name="" oninput="" value="" placeholder="..." maxlength=""></textarea>
  <span class="textfield__label">Textarea</span>
</label>

Source: components/_forms.scss, line 406

400.5 #permalink Select

Examples

Default styling

Select Label

.disabled

disabled

Select Label

Markup

<label class="select [modifier class]">
  <select name="" onchange="">
    <option selected="">Select</option>
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="">Option 3</option>
  </select>
  <span class="select__label">Select Label</span>
</label>

Source: components/_forms.scss, line 434

400.6 #permalink Validierung

Hervorhebung durch Warnfarbe bei fehlerhafter Eingabe, meistens instant während des Tippens.

Example

Buchungsnr... Bitte nur Ziffern Kommentar

Entweder Oder

Check mich!

Markup

<div>
  <label class="textfield">
    <input type="text" />
    <span class="textfield__label alert--warning">
      Buchungsnr... Bitte nur Ziffern
    </span>
  </label>
  <label class="textfield">
    <textarea></textarea>
    <span class="textfield__label alert--warning">
      Kommentar
    </span>
  </label>
  <div class="mb3">
    <label class="radio alert--warning">
      <input type="radio" name="example" />
      <span class="radio__label">Entweder</span>
    </label>
    <label class="radio alert--warning">
      <input type="radio" name="example" />
      <span class="radio__label">Oder</span>
    </label>
  </div>
  <div class="mb3">
    <label class="checkbox alert--warning">
      <input type="checkbox" />
      <span class="checkbox__label">Check mich!</span>
    </label>
  </div>
  <button disabled="disabled">
    Senden
  </button>
</div>

Source: components/_forms.scss, line 479

400.7 #permalink Formular Box

Fasst das Formular optisch als Box zusammen.

Example

Input Textarea

Markup

<div class="form-box">
  <label class="textfield">
    <input type="text" />
    <span class="textfield__label">Input</span>
  </label>
  <label class="textfield">
    <textarea></textarea>
    <span class="textfield__label">Textarea</span>
  </label>
  <button>Senden</button>
</div>

Source: components/_forms.scss, line 524