Component

Translated textarea

Renders a textarea 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)

Textarea (required)

There is no original text for textarea

How to call this component

<%= render "components/translated_textarea", {
  textarea: {
    label: {
      text: "Textarea (required)",
      heading_size: "l"
    },
    name: "textarea"
  }
} %>

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)

Textarea (required)

Original text for textarea

This is the English translation

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

With custom details title (preview)

Textarea (required)

French translation

Je suis en fait français.

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

With govspeak editor (preview)

Textarea (required)

Generating preview, please wait.

There is an error in your Markdown. Select Back to edit and review your markdown.

Original text for textarea

This is the English translation

<%= render "components/translated_textarea", {
  textarea: {
    label: {
      text: "Textarea (required)",
      heading_size: "l"
    },
    name: "textarea"
  },
  details: {
    text: "This is the English translation"
  },
  govspeak_editor: true
} %>