Skip to main content
  • Guidelines
  • React API Reference
  • Blazor API Reference
Input fields allow users to enter and edit text or numeric data. Well-designed inputs clearly communicate their purpose, provide appropriate feedback, and help users avoid errors.

​
Guidance

AspectBest Practice
UsageUse inputs for text entry, search queries, form fields, and any scenario requiring direct user data entry.
ContentProvide clear labels. Use placeholder text sparingly. Include helper text for complex requirements. Display error messages inline.
BehaviorSupport keyboard navigation. Validate input at appropriate times. Provide clear focus states. Consider auto-formatting for specific data types.
StatesClearly indicate default, focus, disabled, read-only, error, and success states through visual styling.
FeedbackProvide immediate visual feedback for interaction states. Display validation feedback at appropriate times (typing, blur, or submission).
ExamplesForm fields, search boxes, comment fields, or filtering inputs.

​
Best Practices

  • Clear Labeling: Always provide visible labels (except in specific contexts like search fields where the purpose is self-evident).
  • Input Validation: Validate at appropriate times and provide clear, helpful error messages.
  • Appropriate Sizing: Size inputs appropriately for the expected content length.
  • Logical Grouping: Group related inputs together visually and semantically.
  • Contextual Cues: Use prefixes, suffixes, or icons to provide additional context when helpful.

​
Do’s and Don’ts

Do

  • Provide clear, visible labels for all inputs.
  • Indicate required fields clearly.
  • Show validation errors with specific guidance on how to fix them.
  • Support standard keyboard interactions (tab navigation, shortcuts).

Don't

  • Rely solely on placeholder text for field labels.
  • Use ambiguous error messages.
  • Validate prematurely before users complete their entry.
  • Create custom input behaviors that violate platform conventions.

​
Additional Guidance

  • Psychological Impact:
    • Perceived Effort: Well-designed inputs reduce the perceived effort of data entry tasks.
    • Error Prevention: Clear guidance helps users avoid mistakes, reducing frustration.
    • Flow State: Smooth, predictable input behavior helps users maintain focus and productivity.
⌘I