Skip to main content

This is a guide on using the GOV.UK Design System Form Builder

  1. Index
  2. Text fields

Text fields

Text fields allow users to enter text that’s no longer than a single line.

In addition to #govuk_text_field, the form builder supports various other methods that take the same parameters and produce inputs for particular data types:

Input types supported by the form builder
Method Input type Documentation
#govuk_number_field number MDNdocumentation for number inputs , WHATWGstandard document for number inputs
#govuk_phone_field tel MDNdocumentation for telephone inputs , WHATWGstandard document for telephone inputs
#govuk_email_field email MDNdocumentation for email inputs , WHATWGstandard document for email inputs
#govuk_password_field password MDNdocumentation for number inputs , WHATWGstandard document for number inputs
#govuk_url_field url MDNdocumentation for URL inputs , WHATWGstandard document for URL inputs

When used, these fields will look and act the same on desktop but mobile browsers will present a different keyboard depending on the type attribute.

Generating a text input with a custom label and hint

Input

= f.govuk_text_field :first_name,
  label: { text: 'First name' },
  hint_text: 'You can find it on your birth certificate'

Rendered output

You can find it on your birth certificate

HTML output

<div class="govuk-form-group">
  <label for="person-first-name-field" class="govuk-label">
    First name
  </label>
  <span class="govuk-hint" id="person-first-name-hint">
    You can find it on your birth certificate
  </span>
  <input id="person-first-name-field" class="govuk-input" aria-describedby="person-first-name-hint" type="text" name="person[first_name]" />
</div>

Numeric text fields

All values passed into the form helper that aren’t among its named parameters will be set as HTML attributes.

This feature is useful when requesting non-quantity values like account numbers, payment card numbers and sort codes. There are more details on the reasoning behind this decision in the accompanying blog post.

Input

= f.govuk_text_field :account_number,
label: { text: "Account number" },
pattern: "[0-9]*",
inputmode: "numeric"

Rendered output

HTML output

<div class="govuk-form-group">
  <label for="person-account-number-field" class="govuk-label">
    Account number
  </label>
  <input id="person-account-number-field" class="govuk-input" pattern="[0-9]*" inputmode="numeric" type="text" name="person[account_number]" />
</div>

Generating text inputs with custom widths

By default, inputs will expand to fill their container. When no width parameter is passed in no width class will be added.

Custom widths help users understand the length of the value they are intended to enter. For example, a telephone number field needn’t be the full width of the page when it might only be 11 digits long.

Input

h3.govuk-heading-s
  | Fractional widths

= f.govuk_text_field :full,           width: 'full'
= f.govuk_text_field :three_quarters, width: 'three-quarters'
= f.govuk_text_field :one_half,       width: 'one-half'
= f.govuk_text_field :one_third,      width: 'one-third'
= f.govuk_text_field :one_quarter,    width: 'one-quarter'

h3.govuk-heading-s
  | Absolute (character) widths

= f.govuk_text_field :twenty, width: 20
= f.govuk_text_field :ten,    width: 10
= f.govuk_text_field :five,   width: 5
= f.govuk_text_field :four,   width: 4
= f.govuk_text_field :three,  width: 3
= f.govuk_text_field :two,    width: 2

Rendered output

Fractional widths

Absolute (character) widths