Text fields

When to use

Any typed value: names, codes, amounts, phone numbers.

Best practices

• Every field has a visible label tied to it.
• Placeholders show an example (“e.g. Asha Patil”), never the label.
• Use the right input type, such as number, phone or email, so touch keyboards fit the value.
• Validate as people leave the field; errors say what to do (“Enter the contact’s name.”).
• Mark the few optional fields as optional, rather than marking every required one.
• Read-only and generated values appear as text, or as a disabled field with readable text.

Avoid

• Placeholder text as the only label.
• Free typing when a short list of choices would do.

Accessibility

• Errors are linked to their field and announced.
• Never remove the focus ring.