LocalizedInput

The LocalizedInput component is designed for multilingual applications. It allows users to enter values for multiple languages, and it stores the data in a JSON structure where each key corresponds to a language code.

Example stored value:

{
  "en": "Hello",
  "tr": "Merhaba"
}

This makes it possible to build applications that support dynamic localization across different languages.

1. Basic Properties

• Name: The unique identifier of the component (e.g., LocalizedInput1).
• Label: The text displayed above the input field.
• Default Value: The initial multilingual JSON value.
• Placeholder: A hint displayed inside the input when empty.

States

• Read Only: Shows the localized values but prevents editing.
• Disabled: Makes the input non-interactive.
• Hidden: Hides the component while keeping it available in logic.

2. Layout

Defines how the localized input behaves across responsive screen sizes and its spacing relative to other components.

📘 See Common Properties → Layout.

3. Events

• onChange: Triggered whenever a localized value is updated.
• onBlur: Triggered when the input loses focus.

4. Validations

Validation rules ensure that localized values meet specific conditions (e.g., requiring all languages to have a value).

📘 See Common Properties → Validations.

5. Additional Options

• Auto Focus: Automatically focuses the field when the page loads.
• Required: Ensures that at least one value is provided.
• Multiline: Allows multi-line input for longer text.
• Rows / Rows Max: Defines the visible height of the text area.
• Color: Theme color of the component (primary, secondary).

6. How It Works

• The application automatically displays input fields for all available languages in the system.
• Each field corresponds to a language (e.g., English, Türkçe).
• The component stores the input as a JSON object, where the key is the language code and the value is the localized text.

Example:

{
  "en": "Welcome",
  "tr": "Hoşgeldiniz",
  "de": "Willkommen"
}

7. Style

Custom styles can be applied for further visual adjustments.

📘 See Common Properties → Style.

✅ The LocalizedInput component is essential for multilingual applications, making it easy to collect, store, and manage localized data consistently across all supported languages.