Input

The input component allows users to enter and edit text-based data. It provides a standardized interface for collecting user input such as names, email addresses, passwords and other textual information.

Type Component

Tier Global

Documentation Status Minimal

Last Edited 13.02.2026

Open in Figma View on GitHub

Usage

The input component is used to collect short to medium-length free-form text from users. It serves as the primary method for gathering information when the exact data format or content isn't predetermined by the system. Input fields are essential for forms and data entry workflows where users need the flexibility to enter custom text rather than selecting from predefined options.

Input validation

Use validation states to provide real-time feedback about the quality and validity of user input. This helps users understand whether their input meets requirements before attempting to submit a form, reducing errors and improving the overall user experience.

Error input validation

• Input is invalid and would prevent successful form submission
• Required fields are left empty after the user has interacted with them
• Input format is incorrect (invalid email address, phone number, etc.)
• Input violates business rules or constraints (password too short, username already taken)
• User input contains forbidden characters or content

Example scenarios: Invalid email format, password doesn't meet requirements, required field left blank, numeric input contains letters.

Warning input validation

• Input is technically valid but potentially problematic or unusual
• Suggesting improvements that aren't strictly required
• Alerting users to potential issues that won't block submission
• Input might cause complications or confusion later
• Recommending best practices or alternative approaches

Example scenarios: Weak but acceptable password, unusual email domain, input that might be misinterpreted, using non-standard formatting.

Positive input validation

• Complex validation requirements are successfully met
• Confirming that corrected input now passes validation
• Input meets high-quality standards or best practices
• Providing reassurance for critical or complex fields
• Real-time confirmation helps reduce user anxiety

Example scenarios: Strong password created, email format verified, unique username available, complex requirements satisfied.

Note: Use positive states sparingly - not every valid input needs positive confirmation, as this can create visual noise.

When to use

• Collecting short to medium-length text from users (names, emails, addresses)
• Gathering numerical data like quantities, prices, or measurements
• Ideally the expected input format is predictable and can be validated
• Creating forms such as user registration, login, or profile management
• Building configuration panels where users set preferences or parameters

When not to use

• Users need to enter long-form text (use Text area instead)
• Presenting users with a predefined set of options (use Select, Radio, or Checkbox)
• Input data has a complex format that's difficult to type (use specialized pickers for dates, times, colors)
• You are collecting binary yes/no information (use Switch or Checkbox)
• Users need to upload files (use file upload components)
• The input requires rich formatting like bold, italics, or links (use rich text editors)