Tutorial 06b · Components

Form Validation & States

Disabled, error hints, and live validation patterns without reinventing lucUI inputs.

10 minIntermediatelucUI 2 · v2.1.3

Objectives

  • Show error/ disabled states using native attributes.
  • Add aria hints with alerts.
  • Keep glass styling intact.

Steps

Error hint

Enter a valid email.

error.html
<input class="luc-input" aria-invalid="true" aria-describedby="err">
<p id="err" class="luc-text-sm" style="color:var(--luca-tangerine)">Invalid email</p>

Combine with alert

Fix errors

Check highlighted fields.

Exercise

Add JS that toggles aria-invalid on blur and shows gold alert on success.

← Previous Next →