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.

Component Variants

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

Write a clear and concise label to describe the purpose of and/or data for each input field.
Use placeholder text to give users a starting point or to show the expected format of the data.
Provide clear feedback when users enter invalid or incomplete data. Give them the opportunity to correct any errors before submission.
Use the correct background color for inputs. The alt background option should be used on all non-white backgrounds.
Don’t make unnecessary or potentially optional forms required.
Don’t add an info icon to the label unless the data would be unfamiliar to the user.
Don't use placeholder text as a substitute for labels.
Don’t match the background of input to the background of the page.
Related Components