Input
An input is used to accept data from the customer. It supports various textual formats, including numbers, passwords, and email addresses.
Only ask for necessary information
Filling out forms correctly takes time and effort for a customer, and often distracts from achieving their intended task. Respect the customers time by only aking for the information required to solve their problem.
Our input component generally matches the DOM API for input elements. The default type for an input is text.
Make sure to provide a label describing the content and purpose of the input. You can provide a label using either the htmlFor prop matching the input's id prop, or by wrapping the input.
Ensure <label/>
elements are tied to fields
Use either the htmlFor attribute on a label alongside the id attribute on your input, or wrap the input inside a element to ensure that the label and field are interactable.
Avoid using the placeholder
attribute
The placeholder prop is considered harmful, for multiple accessibility reasons (primarily that content disappears, making it hard for customers to recall what information belongs in a field). See research conducted by the Nielsen Norman Group for more information.
Input Label
You can use the type prop to change the data types that an input can consume. Input currently supports the text, email, password, and number types.
Password
Quantity
- Design
- Implementation
TODO - Design
Product Usage
- Dashboard
- Teams
- Radar