Forms

The form elements prioritize clarity, accessibility, and user confidence. Every input field provides clear visual feedback about its state, helping users understand what's expected and whether their input is valid.

Principles

Visual Feedback System

Default State: Neutral grey border indicates ready for input
Hover State: Darker border shows the field is interactive
Focus State: Darkest border (grey-1300) indicates active input
Validation States: Color-coded borders provide immediate feedback

Accessibility Features

44px Touch Targets: All form fields meet minimum touch size requirements
Clear Focus Indicators: High contrast borders for keyboard navigation
Descriptive Labels: Every field has a clear, descriptive label
Error Association: Validation messages are programmatically linked to fields

Input Fields

Text Inputs

Default State

With Value

Email Input

Password Input

Validation States

Success State

This field is valid

Error State

This field contains an error

Warning State

Please double-check this field

Disabled State

Textarea Fields

Default Textarea

Description

Textarea with Content

Comments

This is sample content in a textarea field. It demonstrates how text wraps and flows within the input area.

Complete Form Examples

Contact Form

Registration Form

Implementation

CSS Classes

<!-- Input Fields -->
<input className="input-field" type="text" />
<input className="input-field error" type="email" />
<input className="input-field success" type="text" />

<!-- Textarea -->
<textarea className="textarea-field"></textarea>

<!-- Validation Messages -->
<p className="validation-message error">
  Error message
</p>

Best Practices

Always provide clear, descriptive labels
Use appropriate input types (email, tel, url, etc.)
Provide real-time validation feedback
Group related fields logically
Use placeholder text for examples, not instructions
Ensure all fields are keyboard accessible