Form input example

With separate dir attributes for field and help text

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.

If the input field and the help text (label, hint and error messages) are required to display in different directions the right_to_left_help attribute can be set as false to override the right_to_left attribute.

How it looks (preview)

Some input text that displays right to left with a label that displays left to right

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 that displays right to left with a label that displays left to right"
  },
  hint: "Some hint text that displays in the same text direction as the label",
  name: "rtl-input-text",
  value: "العربيَّة",
  right_to_left: true,
  right_to_left_help: false,
  error_message: "An error message that displays in the same text direction as the label"
} %>