💠 Input
A basic widget for getting the user input in a text field.
Usage
The Input component is a basic widget used in forms to collect user data in a text field format. It's a versatile element that allows for a range of data input, from simple text to complex data formats like dates and email addresses. The Input component is fundamental to any form, enabling users to type information directly into a UI.
The Input should be clearly labeled, typically with a Label component, to indicate to the user what information is required.
Placeholder text can provide hints or examples of the required input, but it should not replace a label.
When to use
- Text entry: Use an Input component for fields where users need to enter text, numbers, or other data.
- Form submissions: Employ Input components within forms for user registrations, logins, searches, and other data submission tasks.
- Data formatting: Utilize specific Input types to enforce data formatting, like 'date' for calendar pickers or 'number' for numeric data.
- User customization: Inputs allow for user customization and personalization, as they can fill in information that tailors the experience to their needs.
Avoid using Input components for non-textual data if more suitable controls exist, like sliders for ranges or switches for binary options. Do not rely on placeholder text alone for instructions, as it disappears when the user starts typing, which can lead to confusion. Input fields should not be excessively long or short; their length can suggest the amount of text the user is expected to provide.
Examples
Default
File
Disabled
With label
With button
With form
Useful links
Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: