Form input example

With dir attribute

Allows the correct display of right to left languages.

By default the input element and the label both display text in a left to right direction.

When the right_to_left parameter of the input component is set to true both the input and the label, hint and error message display their content in a right to left direction.

How it looks (preview)

Some input text to be displayed right to left with a label that displays in the same direction

Some hint text that displays in the same text direction as the label

Error: An error message that displays in the same text direction as the label

How to call this example

<%= render "govuk_publishing_components/components/input", {
  label: {
    text: "Some input text to be displayed right to left with a label that displays in the same direction"
  },
  hint: "Some hint text that displays in the same text direction as the label",
  error_message: "An error message that displays in the same text direction as the label",
  name: "rtl-input-text",
  value: "العربيَّة",
  right_to_left: true
} %>