Liferay.Design / Lexicon
/
Get StartedResources
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

Input Localizable

Sign In
View in FigmaView in ClayDocumentation

An Input variation used in fields that can be translated into multiple languages.

input localizable

Layout

This component contains two elements:

  • Input: a Text Input, Text Area, or Input Group (only specific cases).
  • Localization Button: displays a Dropdown Menu to select a language.

input localizable

The Dropdown Menu must always contain these items in each entry:

  • Country flag
  • ISO 639-1 code
  • Status:
    • Default: the default language. It is always the first in the list.
    • Translated: the user has provided a text that differs from the default input text.
    • Not translated: the input text does not differ from the original text.

input localizable with dropdown open

Interaction

The Localization Button only changes field content language. It does not change the title label or the help text language. The help text displays the default language text as a hint to the user.

This field is usually placed in a form with other localizable fields. Selecting a language in one of the localizable fields changes the language for all other fields.

Attributes

input localizable parts

  1. Input
  2. Localizable button

input localizable metrics

Variations

Text Area localizable

input localizable

Input group localizable

A very common case in Liferay Portal is translating URL fields. This field is a clear combination of an input group and a localizable field.

input localizable

Something to improve? Report an issue!
Menu