Form input example

With aria attributes

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.

How it looks (preview)

This is an example only and may not work with a screen reader

How to call this example

<%= 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"
} %>