TaskBuild form field components. Each .field is a wrapper with display: flex, flex-direction: column, gap: 4px. .field label has font-size 14px, font-weight 500. .field input has padding 8px 12px, border 1px solid var(--border), border-radius var(--radius-md), font 1rem. .field input:focus has outline 2px solid var(--primary), outline-offset -1px. .field input:user-invalid has border-color var(--danger). .field .error has color var(--danger), font-size 13px, display: none. .field:has(input:user-invalid) .error has display: block. Demo: a form with 3 fields (email, password, age) + their errors.
Capstone 4: Form component (input + label + error)
200 XP14 min
Theory
A form group with proper validation states
Each form group is: label + input + (optional) help text or error.
States:
- Rest β neutral border.
- Focus β primary outline.
- Invalid (with :user-invalid) β red border + error text appears.
- Disabled β muted opacity.
:user-invalid is the modern :invalid β it ONLY applies AFTER the user interacts. Stops "all fields red on page load."
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.