Input fields

Inputs can exist in forms or standalone (like search fields) for manual or voice data entry. They include a container and label, with optional placeholders, icons, or helper text.

While seemingly simple, poorly designed inputs can be hard to notice, lack feedback, or have unclear commands that slow users down.

Key design recommendations for mobile inputs:

• Ensure discoverability: Make inputs clearly visible. Use colored strokes around containers or bottom edges to show active states.
• Write clear labels: Keep labels always visible — never hide them in placeholders. Use specific, concise text (4 words max) without unnecessary modifiers.
• Show clear errors: Don't rely solely on red color for errors. Include icons and brief explanations of the problem and solution.