Translatable Input

The <x-wirekit::translatable-input> component edits one value in several languages: a product name, a category, a shipping method's description. The primary language's field comes first. Under it, every further language has a chip that says whether it is translated, and a field of its own. With a few languages every field is on screen; with many, a chip opens its language, one at a time.

Usage

<x-wirekit::translatable-input
    label="Product name"
    :locales="['de' => 'Deutsch', 'en' => 'English', 'fr' => 'Français']"
    wire:model="name"
/>

The first language of locales is the primary one unless primary names another. A translation that is still missing shows the primary text as its placeholder, so the reader sees what to translate, and its chip says "missing" until something is typed.

Many Languages

With more further languages than inline (2 by default), the fields of the further languages close. A chip opens its language and closes the one open before, and "Show all languages" opens every one of them, in two columns from the sm breakpoint on.

<x-wirekit::translatable-input
    style="max-width: 36rem;"
    label="Category"
    :locales="['de' => 'Deutsch', 'en' => 'English', 'fr' => 'Français', 'it' => 'Italiano', 'es' => 'Español', 'nl' => 'Nederlands', 'pl' => 'Polski', 'sv' => 'Svenska', 'da' => 'Dansk']"
    :value="['de' => 'Schreibwaren', 'en' => 'Stationery', 'fr' => 'Papeterie', 'nl' => 'Kantoorartikelen']"
/>

A chip shows its language's code, a check for translated, a dash for missing and a warning sign for a field the server rejected. The state is in the chip's accessible name as well, "Italiano: missing", so it never rests on its color.

With Livewire

wire:model on the component binds each language to its key of one array, name.de, name.en, with the modifiers you give it:

// app/Livewire/EditCategory.php
use Livewire\Component;

class EditCategory extends Component
{
    // 1. One array per value, keyed by the language code
    public array $name = ['de' => '', 'en' => '', 'fr' => ''];

    public function save(): void
    {
        // 2. The primary language is required, a translation is not
        $this->validate([
            'name.de' => ['required', 'string', 'max:120'],
            'name.*' => ['nullable', 'string', 'max:120'],
        ]);
    }
}

{{-- resources/views/livewire/edit-category.blade.php --}}
<x-wirekit::translatable-input
    label="Category"
    :locales="['de' => 'Deutsch', 'en' => 'English', 'fr' => 'Français']"
    wire:model.blur="name"
    required
/>

An error the server files under one language, name.fr, stands under that language's field, its chip shows the warning sign, and a closed field opens. An error filed under the value itself, name, stands under the legend, and every language's field says it is invalid and points at it. required marks the primary language only: a translation stays optional.

<x-wirekit::translatable-input
    style="max-width: 28rem;"
    label="Product name"
    :locales="['de' => 'Deutsch', 'en' => 'English', 'fr' => 'Français']"
    :value="['de' => '', 'en' => '', 'fr' => '']"
    error="Give the name in at least one language."
    required
/>

Like every field, it takes a labelAfter slot for a mark after the legend, a badge that says the value is not decided yet, for example, as described for Input.

In a Plain Form

Without wire:model, name is the base of the fields' names, name[de], name[en], and value fills them:

<form method="POST" action="/categories/12">
    @csrf
    @method('PUT')

    <x-wirekit::translatable-input
        label="Category"
        name="name"
        :locales="['de' => 'Deutsch', 'en' => 'English']"
        :value="old('name', $category->name)"
    />
</form>

$category->name is the array of texts, as a JSON column cast to array stores it. Laravel reads the request back as the same array, and an error under name.en reaches the English field. old('name', …) brings back what the reader typed when the request fails validation; with $category->name alone, every language would show the stored text again and the edits would be gone.

Several Lines

multiline gives every language a Textarea, with rows lines:

<x-wirekit::translatable-input
    style="max-width: 32rem;"
    label="Description"
    multiline
    :rows="3"
    :locales="['de' => 'Deutsch', 'en' => 'English', 'fr' => 'Français']"
    :value="['de' => 'Mit dokumentenechter Mine, nachfüllbar.', 'en' => 'With a document-proof refill.', 'fr' => '']"
    hint="Shown on the product page."
/>

Naming the Languages

Give locales as a map of code to name, in the words your readers know. A list of codes works too: each language is then named in the reader's language through PHP's intl extension, en as "Englisch" for a German reader, and by its code where intl is not installed. A code is letters, digits, - and _ (pt-BR, zh_Hant); anything else is left out, with a warning in the log while APP_DEBUG is on.

Props

Accessibility

• The value is a fieldset named by its legend, and each field is named by its language in full, so a screen reader announces "Product name, group" and then "English, edit text".
• Each field carries lang with its code, so a screen reader reads the text in that language's pronunciation (WCAG 3.1.2).
• A chip is a button. Its name is the language and its state, "English: translated"; the code and the glyph on it are hidden from screen readers, and the colors follow the state without carrying it alone (WCAG 1.4.1).
• Where a chip opens its language, it carries aria-expanded and aria-controls, and the focus moves to the field it opened. "Show all languages" carries aria-expanded as well.
• A field the server rejected opens and stays open, so its message is in reach.

Keyboard Interaction

Design Tokens

The fields are Input and Textarea, and the group is a field set, each with its own tokens.

Further Reading

• Field for the group's legend, hint and help
• WCAG 3.1.2: Language of Parts