← Back Home

Form Field Design Guidelines

This document outlines best practices for designing and implementing form fields within our design system. Clear, accessible, and intuitive forms are crucial for a positive user experience and successful task completion.

Core Principles

• Clarity: Labels should be clear, concise, and descriptive. They should always be visible.
• Consistency: Maintain a uniform look and feel across all form elements.
• Feedback: Provide immediate and understandable feedback for user input, including validation states.
• Efficiency: Minimize the number of required fields and offer sensible defaults where appropriate.
• Accessibility: Ensure all form elements are usable with assistive technologies.

Labeling

Every input field must have an associated label. Use the <label> element with the for attribute pointing to the input's id. This ensures screen readers can correctly associate the label with its input.

Input Types

Utilize the most appropriate HTML5 input types to leverage native browser behaviors and improve accessibility. Common types include:

• text: For general text input.
• email: For email addresses, includes basic validation.
• number: For numeric input.
• password: For sensitive input, masks characters.
• tel: For telephone numbers.

Placeholder Text

Placeholder text can provide a hint or example of the expected input format. However, it should not replace a visible label, as it can disappear upon focus and is not accessible to all users.

Validation

Implement validation to ensure data integrity. Provide clear, actionable error messages that explain what is wrong and how to fix it. Highlight fields that require attention.

Example Form Snippet

Here is a simple example demonstrating some of these principles:

Further Reading

For more advanced topics such as form layouts, error handling strategies, and accessibility considerations, please refer to the Accessibility Guidelines.

Explore Ancient Textile Patterns