Component

Translated input

Renders an input field and the english translation within a details component if one is present

This combines two other publishing components:

It should be used on pages where translations of objects can be created or edited.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Input (required)

There is no original text for input

How to call this component

<%= render "components/translated_input", {
  input: {
    label: {
      text: "Input (required)"
    },
    heading_size: "l",
    name: "input"
  }
} %>

Accessibility acceptance criteria

accept focus
be focusable with a keyboard
be usable with a keyboard
indicate when it has focus

Other examples

With details text (preview)

Input (required)

Original text for input

This is the English translation

<%= render "components/translated_input", {
  input: {
    label: {
      text: "Input (required)"
    },
    heading_size: "l",
    name: "input"
  },
  details: {
    text: "This is the English translation"
  }
} %>

With custom details title (preview)

Input (required)

French translation

Je suis en fait français.

<%= render "components/translated_input", {
  input: {
    label: {
      text: "Input (required)"
    },
    heading_size: "l",
    name: "input"
  },
  details: {
    title: "French translation",
    text: "Je suis en fait français."
  }
} %>