Text fields

Anatomy

A field is label + input + one supporting slot. The slot is either a description (idle) or a validation message (error), never both at once.

Rules

• Labels are always visible; placeholder text is an example, not the label.
• Validate on blur or submit, not on every keystroke.
• Errors say what to do, not just what failed (“Enter a valid host name”, not “Invalid input”).
• Search fields use the magnifier icon and a clear affordance; they never trigger destructive actions on Enter.