Champ de saisie

Anatomy

1. Enabled container outline
2. Label text in empty field
3. Leading icon (optional)
4. Label text in populated field
5. Trailing icon (optional)
6. Focused container outline
7. Caret
8. Input text
9. Supporting text (optional)

Target area

The target area should have a minimm size of 48px.

Text filed states

States are visual indicators that convey the current status or condition of a component or interactive element within the interface.

• Enable
• Hovered
• Focus
• Disabled
• Error

Input text states

• Enable
• Hovered
• Focus
• Disabled
• Error

Best practices for text fields

Use a Single-Column Layout

Forms should be structured in a single vertical column rather than multiple columns.

• It improves efficiency by maintaining a natural downward flow.
• It reduces cognitive load, as users don’t need to decide where to go next.
• It minimizes the risk of missed fields, especially for users with limited screen visibility (e.g., screen magnifiers).

Place Labels Above Inputs

Labels should be positioned above input fields, not beside them.

• It improves efficiency by maintaining a natural downward flow.
• It reduces cognitive load, as users don’t need to decide where to go next.
• It minimizes the risk of missed fields, especially for users with limited screen visibility (e.g., screen magnifiers).

If a form becomes too long, consider splitting it into multiple steps to reduce complexity and improve completion rates.

Pro Tips : Multi-step forms are especially useful in complex flows such as onboarding or checkout processes.

Minimize the Number of Fields

Only request essential information.

• Too many fields increase drop-off rates.
• They require more effort and increase the likelihood of errors.
• They also add unnecessary development complexity.

If sensitive information is required, clearly explain why it is needed.

Pro Tips : Transparency builds trust and improves completion rates.

Clearly Mark Required and Optional Fields

Users should always know which fields are mandatory.

• Mark required fields with an asterisk (*) or the word “required”.
• Mark optional fields with the word “optional”.

Avoid relying only on instructions like “All fields are required unless marked optional,” as users often skip this information.

Pro Tips : Clearly labeling both types improves accessibility, especially for screen reader users.

Match Field Width to Input Type

Field size should reflect the expected input length.

• Short inputs (e.g., ZIP codes) should use smaller fields.
• Longer inputs (e.g., addresses) should use wider fields.

Avoid making all fields the same width, as it can create confusion.

Use Familiar and Conventional Patterns

Stick to standard form designs that users already understand.

• Avoid unconventional layouts or styles that may cause confusion.
• Ensure users can easily distinguish between empty and filled fields.

Pro Tips : Following familiar patterns aligns with users’ mental models and reduces cognitive load.

Display Helpful Hints Above Fields

When additional guidance is needed, provide helper text (hints).

• Place hints above the input field, not below.
• Keep them visible avoid hiding them in tooltips.

This helps users understand requirements before interacting, reducing errors.

Key Takeaways

• Keep forms simple, structured, and predictable.
• Reduce cognitive load and interaction cost.
• Ensure clarity, accessibility, and consistency across all inputs.