Formulare
Eingabefelder, Select-Boxen, Checkboxen, Radio-Buttons, Validierungszustände und Formular-Layouts auf Basis von UIkit.
Eingabefelder
HTML
<div class="uk-margin">
<label class="uk-form-label">Label</label>
<div class="uk-form-controls">
<input class="uk-input" type="text" placeholder="Placeholder">
</div>
</div>
<textarea class="uk-textarea" rows="3"></textarea>
Select & Range
HTML
<select class="uk-select">
<option>Option 1</option>
<option>Option 2</option>
</select>
<input class="uk-range" type="range" min="0" max="100">
Checkboxen & Radio-Buttons
Checkboxen
Radio-Buttons
HTML
<label><input class="uk-checkbox" type="checkbox" checked> Option A</label>
<label><input class="uk-radio" type="radio" name="radio"> Option 1</label>
Validierungszustände
Gültige E-Mail-Adresse
Ungültige Eingabe
HTML
<input class="uk-input uk-form-success" type="text">
<input class="uk-input uk-form-danger" type="text">
Größen
HTML
<input class="uk-input uk-form-large" type="text" placeholder="Large">
<input class="uk-input" type="text" placeholder="Default">
<input class="uk-input uk-form-small" type="text" placeholder="Small">
Input mit Icon
HTML
<!-- Icon links -->
<div class="uk-inline">
<span class="uk-form-icon">
<i class="fa-solid fa-magnifying-glass"></i>
</span>
<input class="uk-input" type="text" placeholder="Suchen...">
</div>
<!-- Icon rechts -->
<div class="uk-inline">
<span class="uk-form-icon uk-form-icon-flip">
<i class="fa-solid fa-envelope"></i>
</span>
<input class="uk-input" type="email">
</div>