Text Fields allow users to input text and numbers.
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.
Used to input general numbers.
Used to input a telephone number.
Used to input an email address.
Used to enter a password
Only ask for information that definitely needed, don’t mark fields as ‘required’, instead use ‘optional’.
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.
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.
Making text inputs the right size for the content they are used to collect helps the user understand what to enter.
Hint text should appear below the label and above the input. Do not use placeholders.
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".
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.
Fields are consistent across form elements and include elements such as label, hints and error indentation.