`<TranslatableInputs>`

You may have inputs which are translated in multiple languages and want users to edit translations for each language separately. To display them, you can use the <TranslatableInputs> component.

Usage

<TranslatableInputs> allows to edit several fields at a time. The fields must have one value per language, for instance:

{
    id: 1234,
    name: {
        en: 'White trousers',
        fr: 'Pantalon blanc',
    },
    description: {
        en: 'Slim fit trousers for every day use'
        fr: 'Pantalon ajusté pour un usage quotidien',
    }
}

<TranslatableInputs> does not require a source prop. But it requires one or more child <Input>, each one with a source prop. And you must pass the locales prop determine the languages to display.

<TranslatableInputs locales={['en', 'fr']}>
    <TextInput source="name" />
    <RichTextInput source="description" />
</TranslatableInputs>

Props

Prop	Required	Type	Default	Description
`locales`	Required	`Array`	-	An array of locales.
`defaultLocale`	Optional	`string`	`en`	The default locale to display
`fullWidth`	Optional	`boolean`	`true`	If `false`, the inputs will not expand to fill the form width
`groupKey`	Optional	`string`	-	A unique key for accessibility purpose
`selector`	Optional	`ReactNode`	-	A selector to choose the locale to display
`StackProps`	Optional	`object`	-	Props passed to the rendered MUI Stack
`sx`	Optional	`SxProps`	-	Material UI shortcut for defining custom styles

`defaultLocale`

React-admin uses the user locale as the default locale in this field. You can override this setting using the defaultLocale prop.

<TranslatableInputs locales={['en', 'fr']} defaultLocale="fr">
    <TextInput source="name" />
    <RichTextInput source="description" />
</TranslatableInputs>

By default, <TranslatableInputs> will allow users to select the displayed locale using Material UI tabs with the locale code as their labels.

`fullWidth`

By default, a <TranslatableInputs> group expands to fill the form width. You can disable this behaviour by setting the fullWidth prop to false:

<TranslatableInputs locales={['en', 'fr']} fullWidth={false}>
    <TextInput source="title" />
    <TextInput source="description" />
</TranslatableInputs>

`groupKey`

If you have multiple TranslatableInputs on the same page, you should specify a groupKey so that react-admin can create unique identifiers for accessibility.

<TranslatableInputs locales={['en', 'fr']} groupKey="essential-fields">
    <TextInput source="name" />
    <RichTextInput source="description" />
</TranslatableInputs>

`locales`

Set the locales to display with an array of strings - each string becoming a key in the input value - . The order of the locales will be the order of the tabs.

<TranslatableInputs locales={['en', 'fr']}>
    <TextInput source="name" />
    <RichTextInput source="description" />
</TranslatableInputs>

You may override the tab labels using translation keys following this format: ra.locales.[locale_code]. For instance, ra.locales.en or ra.locales.fr.

`selector`

You may override the language selector using the selector prop, which accepts a React element:

const Selector = () => {
    const {
        locales,
        selectLocale,
        selectedLocale,
    } = useTranslatableContext();

    const handleChange = event => {
        selectLocale(event.target.value);
    };

    return (
        <select
            aria-label="Select the locale"
            onChange={handleChange}
            value={selectedLocale}
        >
            {locales.map(locale => (
                <option
                    key={locale}
                    value={locale}
                    // This allows to correctly link the containers for each locale to their labels
                    id={`translatable-header-${locale}`}
                >
                    {locale}
                </option>
            ))}
        </select>
    );
};

<TranslatableInputs
    record={record}
    resource="products"
    locales={['en', 'fr']}
    selector={<Selector />}
>
    <TextInput source="name" />
    <RichTextInput source="description" />
</TranslatableInputs>

`StackProps`

Use the StackProps prop to pass props to the rendered MUI Stack component.

For instance, you can use direction: 'row' to display the inputs side by side instead of stacked:

<TranslatableInputs
    locales={['en', 'fr']}
    StackProps={{ direction: 'row' }}
>
    <TextInput source="title" />
    <TextInput source="description" sx={{ marginLeft: 2 }} />
</TranslatableInputs>

TranslatableInputs with direction row

`sx`

Use the sx prop to pass additional styles to the component:

<TranslatableInputs
    locales={['en', 'fr']}
    sx={{ border: 'solid 1px red' }}
>
    <TextInput source="title" />
    <TextInput source="description" />
</TranslatableInputs>

Validation

You can add validators to any of the inputs inside a TranslatableInputs. If an input has some validation error, the label of its parent tab will be highlighted as invalid:

<TranslatableInputs locales={['en', 'fr']}>
    <TextInput source="name" validate={[required()]} />
    <RichTextInput source="description" validate={[maxLength(100)]} />
</TranslatableInputs>