Text Field

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

Edit live code
<TextField id="name" label="Name" />
<TextField id="name" label="Name" />

Number Field

Used to input general numbers.

Edit live code
<NumberField id="age-2" label="Age" characters={4} />
<NumberField id="age-2" label="Age" characters={4} />

Tel Field

Used to input a telephone number.

Edit live code
<TelField id="tel" label="Mobile" characters={11} />
<TelField id="tel" label="Mobile" characters={11} />

Email Field

Used to input an email address.

Edit live code
<EmailField id="email" label="Email field" characters={25} />
<EmailField id="email" label="Email field" characters={25} />

Password field

Used to enter a password

Edit live code
<PasswordField id="password" label="Password" characters={25} />
<PasswordField id="password" label="Password" characters={25} />

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.

Edit live code
<TextField id="year" label="Year" characters={4} />
<TextField id="year" label="Year" characters={4} />

Hint Text

Hint text should appear below the label and above the input. Do not use placeholders.

Edit live code
<TextField id="name-4" label="Name" hint="Used for contacting you" />
<TextField id="name-4" label="Name" hint="Used for contacting you" />

Validation Error

Edit live code
<TextField id="name-5" label="Name" error="Enter a name" />
<TextField id="name-5" label="Name" error="Enter a name" />

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".

Edit live code
<TextField
  id="name-6"
  label="Name"
  hint="Used for contacting you"
  fullWidth="always"
/>
<TextField
  id="name-6"
  label="Name"
  hint="Used for contacting you"
  fullWidth="always"
/>

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.

Edit live code
<TextField id="name" label="Name" iconLeft="gas" />
<TextField id="name" label="Name" iconLeft="gas" />

Properties

Related

• Form Guidelines
• Adam Silver - Form design: from zero to hero all in one blog post (opens in new window) 
• GOV.UK Design system (opens in new window)