1. Government Frontend Component Guide
  2. Form input

Component

Form input

A form input field and an associated label.

How it looks (preview all)

How to call this component

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "What is your name?"
  },
  name: "name"
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Accessibility acceptance criteria

Inputs in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • be usable with touch
  • indicate when they have focus
  • be recognisable as form input elements
  • have correctly associated labels
  • be of the appropriate type for their use, e.g. password inputs should be of type ‘password’

Labels use the label component.

Avoid using autofocus and tabindex unless you have user research to support this behaviour.

Other examples

Specific input type (preview)

By default the input will be type=”text”. This parameter accepts an alternative, e.g. “search” or “email”. No validation is done on this input.

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "What is your email address?"
  },
  name: "address",
  type: "email"
} %>

With an identifier (preview)

Give the input a specific ID.

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "Has an id"
  },
  name: "hasid",
  id: "hasid"
} %>

With aria attributes (preview)

The component accepts two possible aria attributes: aria-describedby and aria-controls.

aria-describedby is used to indicate the ID of the element that describes the input. This will be overridden in the event of an error, where the error will be used for the describedby attribute value. This example uses the ID of the main container for demonstration purposes as there aren’t any useful elements with IDs in the component guide. In real use this would be passed the ID of an element that correctly described the input.

aria-controls allows the addition of an aria-controls attribute, for use in places like the finders where the page is updated dynamically after value changes to the input.

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "This is an example only and may not work with a screen reader"
  },
  name: "labelledby",
  describedby: "wrapper",
  controls: "wrapper"
} %>

With hint (preview)

Please provide your first and last name
<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "What is your name?"
  },
  name: "name",
  hint: "Please provide your first and last name"
} %>

With error (preview)

Error: Please could you provide your name
<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "What is your name?"
  },
  name: "name",
  error_message: "Please could you provide your name"
} %>

With error items (preview)

Error: Descriptive link to the question with an error 1
Descriptive link to the question with an error 2
<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "What is your name?"
  },
  name: "name",
  error_items: [
    {
      text: "Descriptive link to the question with an error 1"
    },
    {
      text: "Descriptive link to the question with an error 2"
    }
  ]
} %>

With value (preview)

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "Search for"
  },
  name: "name",
  value: "moose"
} %>

Autofocused (preview)

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "Username"
  },
  name: "username",
  autofocus: true,
  tabindex: 0
} %>

Readonly (preview)

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "Readonly attribute"
  },
  name: "readonly",
  value: "You can't change me",
  readonly: true
} %>

With maxlength (preview)

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "An input that doesn't allow many characters"
  },
  name: "name",
  value: "You can't type more",
  maxlength: 10
} %>

With autocomplete (preview)

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "Automatically complete the field with a user's email address (in supporting browsers)"
  },
  name: "name",
  type: "email",
  autocomplete: "email"
} %>

With custom width (preview)

It’s on your National insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "National insurance number"
  },
  hint: "It’s on your National insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.",
  name: "name",
  width: 10
} %>

With search icon (preview)

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "Search the internet"
  },
  name: "search-box",
  type: "search",
  search_icon: true
} %>

With custom label size (preview)

Make the label different sizes. Valid options are ‘s’, ‘m’, ‘l’ and ‘xl’.

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "What is your name?"
  },
  name: "name",
  heading_size: "l"
} %>