Skip to main content


A basic component that allows a user to write or edit text.

When to use

Use inputs in forms to help people enter, select, and search for text. Inputs are normally found within a form but can also be part of a modal, search, or card.

Form usage

Inputs should be used with the Field component to provide labels and descriptions for the input.

Live Editor
<Field label="Username">
  <Input placeholder="Enter username" />

Implementation / Options

Placeholder text

Input has the ability to have placeholder text. Use placeholder text sparingly, as placeholder text is often confused for actual text. Confusing placeholder text for text often results in higher error rates with users missing inputs that need filled out. When the input is used with field, placeholder text should not be used in favor of using the label and description.

Prefix or suffix inside Input

Input is able to have an element, such as an icon, placed inside the input at the beginning or end. This allows for the creation of inputs like search fields with a magnifying glass icon.

Live Editor
<Input prefix={<Icon name="search" />} placeholder="Search dashboards" />
Live Editor
<Input suffix={<Icon name="plus-circle" />} />

Addon before or after Input

An accessory, commonly a button, that can occur before or after the input.

Live Editor
<Input addonAfter={<Button variant="secondary">Load</Button>} />

Types and Behaviors


A text input allows users to enter text, numbers, and special characters into the input.


A number input limits users to only entering numerical characters into the input.


A password input masks the characters entered by the user.



The invalid state for the input signifies that the provided content needs correction or additional content needs to be added before the user is able to proceed.


For some situations, the input is able to indicate that it is loading.


Depending on user permissions or if an input is synced with a datasource, an input can have a disabled state.