Forms — inputs & selects

Objectives

• Build accessible form groups with .luc-label.
• Style .luc-input .luc-textarea .luc-select.
• Handle checkboxes and focus.

Steps

<div class="luc-form-group">
  <label class="luc-label" for="email">Email</label>
  <input id="email" class="luc-input" placeholder="you@studio.com">
</div>
<select class="luc-select"><option>Starter</option></select>

<label class="luc-checkbox-group">
  <input type="checkbox" class="luc-checkbox" checked> Label
</label>

Exercise

Build a sign-up form: email, plan select, checkbox, full-width submit. Test keyboard nav.