Contents

name: Form input
description: A form input field and an associated label.
body: |
  [Forked from GOV.UK Frontend](https://govuk-frontend-review.herokuapp.com/components/input)
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).
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 skiplink container for demonstration purposes, 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: "skiplink-container"
  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"

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
govuk_publishing_components-7.2.0	app/views/govuk_publishing_components/components/docs/input.yml