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">
<button type="button" class="btn btn--primary">
Abschicken
</button>
<button type="button" class="btn btn--primary" disabled="disabled">
<i class="fas fa-spinner fa-spin mr1"></i> Abschicken
</button>
<button type="button" class="btn btn--success" disabled="disabled">
<i class="fas fa-check mr1"></i> Gekauft
</button>
<button type="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:
src/components/_forms.scss
, line 1
Examples
Default styling
.disabled
disabled
Markup
<label class="radio [modifier class]">
<input
type="radio"
name=""
checked=""
onclick=""
/>
<span class="radio__label">Radio</span>
</label>
Source:
src/components/_forms.scss
, line 247
Examples
Default styling
.disabled
disabled
Markup
<label class="checkbox [modifier class]">
<input
name=""
checked=""
onclick=""
type="checkbox"
/>
<span class="checkbox__label">
Checkbox
</span>
</label>
Source:
src/components/_forms.scss
, line 284
Example
Markup
<label class="switch">
<span class="switch__input">
<input
name=""
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:
src/components/_forms.scss
, line 324
Examples
Default styling
.disabled
disabled
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=""
value=""
oninput=""
maxlength=""
placeholder="...">
</textarea>
<span class="textfield__label">Textarea</span>
</label>
Source:
src/components/_forms.scss
, line 408
Examples
Default styling
.disabled
disabled
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:
src/components/_forms.scss
, line 442
400.6 #permalink Validierung
Hervorhebung durch Warnfarbe bei fehlerhafter Eingabe, meistens instant während des Tippens.
Example
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:
src/components/_forms.scss
, line 487
400.7 #permalink Formular Box
Fasst das Formular optisch als Box zusammen.
Example
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:
src/components/_forms.scss
, line 532