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> Home</button>
</div>
</form>
Source:
src/components/_forms.scss
, line 1