Skip to main content
  1. Home
  2. Text input

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_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' }
<%= f.govuk_text_field :first_name, label: { text: 'First name' }, hint: { text: 'You can find it on your birth certificate' } %>

Output

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

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

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>

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

= 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

<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

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

Fractional widths

Absolute (character) widths

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

Related information