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.


<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" />


Prop Required Type Default Description
locales Required Array - An array of locales.
defaultLocale Optional string en The default locale to display
groupKey Optional string - A unique key for accessibiliyty purpose
selector Optional ReactNode - A selector to choose the locale to display


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" />

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


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" />


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" />

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.


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

const Selector = () => {
    const {
    } = useTranslatableContext();

    const handleChange = event => {

    return (
            aria-label="Select the locale"
            {locales.map(locale => (
                    // This allows to correctly link the containers for each locale to their labels

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


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)]} />