Inputs enable a user to enter or edit data to influence or change their experience.
- Field: The area or box that holds the input.
- Label: The text above the field that describes the information needed.
- Placeholder (optional): The pre-populated, gray text in the field that hints at the format of the information required.
- Help message (optional): The text below the field that helps a user understand the input and successfully enter a correct value.
Variants
Default
Placeholder
Error
Disabled
Design guidelines
Always include a label
- Placeholder text is not a replacement for labels .
- Place the label above the container.
- Choose short, descriptive words.
- Use sentence case without punctuation.
- Keep length to one line.
- Refer to Foundational Page for more details.
Do
Use succinct noun labels.
Don't
Omit the label; placeholder text is not a label.Use the label to indicate optional inputs
- Use “(optional)” to indicate if the input is optional.
- Required inputs do not need extra labels or copy.
Do
Indicate if an input is optional in the label.
Don't
Use “*” to indicate required.Adjust the size of the field to the expected amount of input
- Field size should set expectations to how much input is required.
- Inputs for shorter values, like a phone number, should be smaller, and inputs for longer values, like a message, should be larger.
Do
Use multiple line heights for text message area.
Don't
Truncate the input value or placeholder.Help message, placeholder, and tooltip
The help message, placeholder, and tooltips help the user understand the input and any additional context.
| Purpose | Limitation | |
|---|---|---|
| Help message | Information to clarify the label, always available in the default state. | Limit the help message to one line. |
| Placeholder | Hints at the format of the input; not crucial information. | Limited length depending on the width of the field; disappears when the user begins typing. |
| Tooltip | Elaborates on non-essential but helpful information about the input. The user should be able to understand the input field without the tooltip. | Users might not look at the contents of the tooltip. |
Do
Place tooltip after the label.
Don't
Repeat information in label, placeholder or help message.Field validation
Show error when the input is no longer in focus. Use animated transition delay of .4 milliseconds.
Don't
Validate immediately after each character typed.
Don't
Add an icon in the input field.Swap help message with an error message when validation fails
Do
Display help message to help the user complete the field.
Do
Swap help message with an error message; describe the most likely error.Development
import Input from '@nerdwallet/react-input';<Input />;Props
In addition to the props defined by this component, any props <input> takes, such as name, value, onChange, etc., are accepted.
<Input>
error
boolean
Show the input in an error visual state.
icon
node
@deprecated prop to show icon on the right side of the input.
feedbackMessages
Array<Object>
fullWidth
boolean
When true, sets width to 100% on the input.
disabled
boolean
Disable interaction and change.
type
= 'text'
string
Type attribute on the <input> element.
className
string
Class on the <input> element.
inputRef
Function
Gives access to the input dom node
label
string
Label for the input. Components should almost always include a label.
errorMessage
node
Optional text to be shown indicating the user is in an error state.
helpMessage
node
Optional help text shown below the input.
tooltip
node
Optional tooltip shown via an icon next to the label.
tooltipPlacement
'top' | 'right' | 'bottom' | 'left'
Positioning of tooltip.
dangerouslyForceFocusStyling
boolean
Force the component to use its focus styles.
dangerouslyForceHoverStyling
boolean
Force the component to use its hover styles.