Menu
Components
Text input
In Design
Hey, this is an old version. View the latest
Text inputs allow the user to provide and edit freeform text. They’re not used that widely, but one common use is in capturing names.
UX Owner: Benjamin Puckering
UI Owner: Janey Long
Note: This component doesn't yet exist in Storybook, preliminary image(s) shown.
On this page
Example
When to use
Text inputs can be used where:
- you’re asking a user for free form text data; and
- that data isn’t predictable; and
- that data isn’t expected to run onto a second line.
When not to use
Text inputs shouldn’t be used where:
- you’re asking for numeric values – try using a numeric input if this is the case.
- the text string is likely to run to more than the length of the text input. Consider using a text area instead.
If the information requested from the user can be (or is likely to be) broken into multiple parts, consider breaking the question into separate text inputs with one part of the answer in each.
Anatomy
Text input Layout
Text inputs usually span 100% of the width available. However, the width can also be set to a specific value where it helps us indicate that we’re only looking for a short answer from the user.
Example
Similar components
There are a range of components that either resemble – or are based on – the text input component. - Numeric input - Autosuggest - Lookup
Input states
Empty
The empty state is used where no text has yet been entered into the input (either by the user or through any form of prefill).
Using placeholder text
Use placeholder text only where it supports users in providing a valid input. Generally, this should be in the form of an example input.
Where to find this component
Documentation version history
Last updated Thursday, 13th May 2021 09:50 by Gemma D.