Text Field
Text Fields allow users to input text and numbers.
Overview
Text fields should be used when dealing with various text formats, e.g. email addresses, telephone numbers, numbers and passwords. A label, hint text and error message are included in all Text Field components.
Usage
Text Field
Number Field
Used to input general numbers.
Tel Field
Used to input a telephone number.
Email Field
Used to input an email address.
Password field
Used to enter a password
Content
Only ask for information that definitely needed, don’t mark fields as ‘required’, instead use ‘optional’.
Validation
- Avoid default HTML form validation
- Avoid validation while typing
- Always validate and show error messages once the form has been submitted
Error messages should appear above the input, and below the label and help text. These should be written in a concise, specific, way using plain language and without pleasantries.
Accessibility
Text Field groups need a group label, which should always sit aligned above it. This label allows users to understand what to enter as well as auto focussing the input which creates a larger touch target.
Variations
Input Length
Making text inputs the right size for the content they are used to collect helps the user understand what to enter.
Hint Text
Hint text should appear below the label and above the input. Do not use placeholders.
Validation Error
Full Width
Text inputs by default will be responsive and will be displayed as full width below the smallest breakpoint. This can be overriden by setting fullWidth="always" and fullWidth="never".
With Icon
Text inputs can show an icon to the left or right of the input by using the iconLeft or iconRight props. See the Icon Component for adding additional icons.
Properties
| Name | Values | Default |
|---|---|---|
id (required) | String | |
label (required) | String | |
optional | Boolean | false |
hint | ReactNode | |
error | ReactNode | |
characters | Number | 25 |
fullWidth | alwaysneversmall | small |
iconLeft | IconName | |
iconRight | IconName | |
... | JSX.IntrinsicElements["input"] |
Tokens
Fields are consistent across form elements and include elements such as label, hints and error indentation.