Skip to content

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

NameValuesDefault

id (required)

String

label (required)

String

optional

Boolean

false

hint

ReactNode

error

ReactNode

characters

Number

25

fullWidth

alwaysneversmall

small

iconLeft

caret-downcaret-rightchevron-leftchevron-rightchevron-upchevron-downcrosscheckeuropoundnew-windowgaselectricitylinkdownloadplusminus

iconRight

caret-downcaret-rightchevron-leftchevron-rightchevron-upchevron-downcrosscheckeuropoundnew-windowgaselectricitylinkdownloadplusminus

...

JSX.IntrinsicElements["input"]

Tokens

Fields are consistent across form elements and include elements such as label, hints and error indentation.