Input ready Storybook
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.
<Field label="Username"> <Input placeholder="Enter username" /> </Field>
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.
<Input prefix={<Icon name="search" />} placeholder="Search dashboards" />
<Input suffix={<Icon name="plus-circle" />} />
Addon before or after Input
An accessory, commonly a button, that can occur before or after the input.
<Input addonAfter={<Button variant="secondary">Load</Button>} />
Types and Behaviors
Text
A text input allows users to enter text, numbers, and special characters into the input.
Number
A number input limits users to only entering numerical characters into the input.
Password
A password input masks the characters entered by the user.
States
Invalid
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.
Loading
For some situations, the input is able to indicate that it is loading.
Disabled
Depending on user permissions or if an input is synced with a datasource, an input can have a disabled state.