Tutorial 06 · Components
Forms — inputs & selects
Glass inputs, labels, textarea, selects and checkboxes that work in both themes.
12 minBeginnerlucUI 2 · v2.1.3
Objectives
- Build accessible form groups with
.luc-label. - Style
.luc-input.luc-textarea.luc-select. - Handle checkboxes and focus.
Steps
Form group
forms.html
<div class="luc-form-group">
<label class="luc-label" for="email">Email</label>
<input id="email" class="luc-input" placeholder="[email protected]">
</div>
<select class="luc-select"><option>Starter</option></select>Checkboxes
check.html
<label class="luc-checkbox-group">
<input type="checkbox" class="luc-checkbox" checked> Label
</label>Mobile
Inputs enforce 16px on mobile and 48px tap area via site hardening.
Exercise
Build a sign-up form: email, plan select, checkbox, full-width submit. Test keyboard nav.