name: Form input
description: A form input field and an associated label.
accessibility_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](/component-guide/label).
govuk_frontend_components:
  - input
examples:
  default:
    data:
      label:
        text: "What is your name?"
      name: "name"
  specific_input_type:
    description: 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.
    data:
      label:
        text: "What is your email address?"
      name: "address"
      type: "email"
  aria_described_by:
    description: |
      Allows the addition of an aria-describedby attribute. Note that this will be overridden in the event of an error, where the error will be used for the describedby attribute value.

      The example below 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.
    data:
      label:
        text: "This might not work"
      name: "labelledby"
      describedby: "wrapper"
  with_hint:
    data:
      label:
        text: "What is your name?"
      name: "name"
      hint: "Please provide your first and last name"
  with_error:
    data:
      label:
        text: "What is your name?"
      name: "name"
      error_message: "Please could you provide your name"
  with_value:
    data:
      label:
        text: "Search for"
      name: "name"
      value: "moose"