Input
Last Updated on Dec 14, 2022
Inputs are used to allow users to provide text input to the system. Inputs support various types of text, numbers, search input, files, passwords, etc.
Design Principles
- Inputs are used to enter or edit data, most commonly, in forms. They can be used to enter text (a string or an array), numbers (integers), or files.
- Most commonly, the user will directly input or edit a value inside the input. They can also be used for typeahead and multi-column search as well.
- Inputs use the Form Label component to denote required status, helper and error text, add a chip, and an info icon. Form Labels are most commonly on top of inputs, but can be used horizontally too. See our documentation on Form Label for more information.
- Inputs can be used inside of tables. See our documentation on Editable Table Cells for more information.
- Inputs can have an active state, disabled state, and an error state.
- We have addons for inputs to add text, a select, or a button to the immediate left or right of an input. These provide helpful microinteractions to make inputs more useful for a variety of different UI needs.
Do's and Don'ts
Related Components
Input Callout