Back to the pattern library

Input

Make the length of the text input box appropriate for the amount of information needed: do not make it frustratingly short or intimidatingly long.

More detailed information on how to use form patterns can be found in our design guidance.

Example

Example

HTML

<label for="full-name" class="">Full name</label>

<input type="text" name="full-name" id="full-name">

SCSS

The styles for this pattern can be found in the foundations on github.

JS

There is no javascript needed for this component.

Design and content

Labels are set:

  • in Avenir medium at 24px
  • with a bottom margin of 8px

Text inputs:

  • have a 1px solid border in #6E6E6E
  • have a 1px solid border in #00A1CC when focussed
  • are padded top and bottom 12px and left and right 8px
  • user entered test is 20px Avenir regular in #282828

Accessibility

We are currently working on this.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change