Text input

Text inputs 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_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

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

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

Output

Rendered
HTML

First name

You can find it on your birth certificate

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

Numeric text inputs

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

Slim
ERB

= f.govuk_text_field :account_number,
label: { text: "Account number" },
inputmode: "numeric"

<%= f.govuk_text_field :account_number, label: { text: "Account number" }, inputmode: "numeric" %>

Output

Rendered
HTML

Account number

<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" inputmode="numeric" type="text" name="person[account_number]" />
</div>

Inputs with prefixes and suffixes

Prefixes and suffixes are useful when you use symbols and abbreviations that are commonly known and understood. Symbols and abbreviations should be explained in the label or hint.

Input

Slim
ERB

= f.govuk_text_field :price_per_kg,
  width: 'one-quarter',
  label: { text: 'Price per kilogram' },
  prefix_text: '£',
  suffix_text: 'per kg'

<%= f.govuk_text_field :price_per_kg, width: 'one-quarter', label: { text: 'Price per kilogram' }, prefix_text: '£', suffix_text: 'per kg' %>

Output

Rendered
HTML

Price per kilogram

<div class="govuk-form-group">
  <label for="person-price-per-kg-field" class="govuk-label">
    Price per kilogram
  </label>
  <div class="govuk-input__wrapper">
    <span class="govuk-input__prefix" aria-hidden="true">
      £
    </span>
    <input id="person-price-per-kg-field" class="govuk-input govuk-!-width-one-quarter" type="text" name="person[price_per_kg]" />
    <span class="govuk-input__suffix" aria-hidden="true">
      per kg
    </span>
  </div>
</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 input needn’t be the full width of the page when it might only be 11 digits long.

Input

Slim
ERB

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 :two_thirds,     width: 'two-thirds'
= 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

<h3 class="govuk-heading-s">
  Fractional widths
</h3>
<%= f.govuk_text_field :full,           width: 'full' %>
<%= f.govuk_text_field :three_quarters, width: 'three-quarters' %>
<%= f.govuk_text_field :two_thirds,     width: 'two-thirds' %>
<%= 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 class="govuk-heading-s">
  Absolute (character) widths
</h3>
<%= 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 %>

Output

Rendered
HTML

Fractional widths

Full

Three_quarters

Two_thirds

One_half

One_third

One_quarter

Absolute (character) widths

Twenty

Ten

Five

Four

Three

Two

<h3 class="govuk-heading-s">
  Fractional widths
</h3>
<div class="govuk-form-group">
  <label for="person-full-field" class="govuk-label">
    Full
  </label>
  <input id="person-full-field" class="govuk-input govuk-!-width-full" type="text" name="person[full]" />
</div>
<div class="govuk-form-group">
  <label for="person-three-quarters-field" class="govuk-label">
    Three_quarters
  </label>
  <input id="person-three-quarters-field" class="govuk-input govuk-!-width-three-quarters" type="text" name="person[three_quarters]" />
</div>
<div class="govuk-form-group">
  <label for="person-two-thirds-field" class="govuk-label">
    Two_thirds
  </label>
  <input id="person-two-thirds-field" class="govuk-input govuk-!-width-two-thirds" type="text" name="person[two_thirds]" />
</div>
<div class="govuk-form-group">
  <label for="person-one-half-field" class="govuk-label">
    One_half
  </label>
  <input id="person-one-half-field" class="govuk-input govuk-!-width-one-half" type="text" name="person[one_half]" />
</div>
<div class="govuk-form-group">
  <label for="person-one-third-field" class="govuk-label">
    One_third
  </label>
  <input id="person-one-third-field" class="govuk-input govuk-!-width-one-third" type="text" name="person[one_third]" />
</div>
<div class="govuk-form-group">
  <label for="person-one-quarter-field" class="govuk-label">
    One_quarter
  </label>
  <input id="person-one-quarter-field" class="govuk-input govuk-!-width-one-quarter" type="text" name="person[one_quarter]" />
</div>
<h3 class="govuk-heading-s">
  Absolute (character) widths
</h3>
<div class="govuk-form-group">
  <label for="person-twenty-field" class="govuk-label">
    Twenty
  </label>
  <input id="person-twenty-field" class="govuk-input govuk-input--width-20" type="text" name="person[twenty]" />
</div>
<div class="govuk-form-group">
  <label for="person-ten-field" class="govuk-label">
    Ten
  </label>
  <input id="person-ten-field" class="govuk-input govuk-input--width-10" type="text" name="person[ten]" />
</div>
<div class="govuk-form-group">
  <label for="person-five-field" class="govuk-label">
    Five
  </label>
  <input id="person-five-field" class="govuk-input govuk-input--width-5" type="text" name="person[five]" />
</div>
<div class="govuk-form-group">
  <label for="person-four-field" class="govuk-label">
    Four
  </label>
  <input id="person-four-field" class="govuk-input govuk-input--width-4" type="text" name="person[four]" />
</div>
<div class="govuk-form-group">
  <label for="person-three-field" class="govuk-label">
    Three
  </label>
  <input id="person-three-field" class="govuk-input govuk-input--width-3" type="text" name="person[three]" />
</div>
<div class="govuk-form-group">
  <label for="person-two-field" class="govuk-label">
    Two
  </label>
  <input id="person-two-field" class="govuk-input govuk-input--width-2" type="text" name="person[two]" />
</div>

Inputs with extra spacing between letters

When asking for long codes, references or phone numbers we can make the text in the field more readable by adding some extra spacing between characters.

Input

Slim
ERB

= f.govuk_text_field :national_insurance_number_without_spacing,
  label: { size: 'm', text: 'What is your National Insurance number?' },
  caption: { text: 'Without extra letter spacing' },
  width: 10,
  value: 'QQ123456A',
  extra_letter_spacing: false

= f.govuk_text_field :national_insurance_number_with_spacing,
  label: { size: 'm', text: 'What is your National Insurance number?' },
  caption: { text: 'With extra letter spacing' },
  width: 10,
  value: 'QQ123456A',
  extra_letter_spacing: true

<%= f.govuk_text_field :national_insurance_number_without_spacing, label: { size: 'm', text: 'What is your National Insurance number?' }, caption: { text: 'Without extra letter spacing' }, width: 10, value: 'QQ123456A', extra_letter_spacing: false %>
<%= f.govuk_text_field :national_insurance_number_with_spacing, label: { size: 'm', text: 'What is your National Insurance number?' }, caption: { text: 'With extra letter spacing' }, width: 10, value: 'QQ123456A', extra_letter_spacing: true %>

Output

Rendered
HTML

Without extra letter spacing What is your National Insurance number?

With extra letter spacing What is your National Insurance number?

<div class="govuk-form-group">
  <label for="person-national-insurance-number-without-spacing-field" class="govuk-label govuk-label--m">
    <span class="govuk-caption-m">
      Without extra letter spacing
    </span>
    What is your National Insurance number?
  </label>
  <input id="person-national-insurance-number-without-spacing-field" class="govuk-input govuk-input--width-10" value="QQ123456A" type="text" name="person[national_insurance_number_without_spacing]" />
</div>
<div class="govuk-form-group">
  <label for="person-national-insurance-number-with-spacing-field" class="govuk-label govuk-label--m">
    <span class="govuk-caption-m">
      With extra letter spacing
    </span>
    What is your National Insurance number?
  </label>
  <input id="person-national-insurance-number-with-spacing-field" class="govuk-input govuk-input--width-10 govuk-input--extra-letter-spacing" value="QQ123456A" type="text" name="person[national_insurance_number_with_spacing]" />
</div>