Forms
Form components with clear labels, validation states, and accessible interactions. All form elements meet WCAG 2.1 standards.
Input Fields
Text Input
We'll never share your email.
Textarea
Select
Validation States
Success State
Username is available
Error State
Please enter a valid email address
Warning State
Password strength: Weak
Form Best Practices
Labels
- Name
Always Visible- Description
Never use placeholder text as a label - keep labels visible above inputs
- Name
Font Weight- Description
600 (Semibold) for clear distinction from input text
- Name
Font Size- Description
14px minimum - ensures readability
- Name
Association- Description
Use htmlFor attribute to properly link labels to inputs
Input Fields
- Name
Minimum Height- Description
44px - ensures adequate touch targets
- Name
Border Radius- Description
8px (0.5rem) - consistent with button radius
- Name
Focus State- Description
2px ring in yellow (#facc15) with 20% opacity
- Name
Padding- Description
16px horizontal, 8px vertical for comfortable spacing
Validation
- Inline validation: Show validation messages immediately below the field
- Icons: Use checkmark (success), X (error), or warning triangle
- Colour + Text: Never rely on colour alone - always include text/icons
- Clear messaging: Specific error messages ("Email is required" not "Error")