A text input variation used in fields that can be translated into multiple languages.
install yarn add @clayui/localized-input version use import LocalizedInput from '@clayui/localized-input' ;
Use it when you want to enable the users to define values like post titles, headings in multiple languages not having to rely on automatic translations.
import {Provider } from '@clayui/core' ;
import LocalizedInput from '@clayui/localized-input' ;
import React from 'react' ;
export default function App () {
const locales = [
{
label : 'en-US' ,
symbol : 'en-us' ,
},
{
label : 'es-ES' ,
symbol : 'es-es' ,
},
{
label : 'fr-FR' ,
symbol : 'fr-fr' ,
},
{
label : 'hr-HR' ,
symbol : 'hr-hr' ,
},
];
const [selectedLocale , setSelectedLocale ] = React .useState (locales [0 ]);
const [translations , setTranslations ] = React .useState ({
'en-US' : 'Apple' ,
'es-ES' : 'Manzana' ,
});
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<LocalizedInput
id = "locale1"
locales = {locales }
onSelectedLocaleChange = {setSelectedLocale }
onTranslationsChange = {setTranslations }
selectedLocale = {selectedLocale }
translations = {translations }
/>
</div >
</Provider >
);
}Show code Localized URL
You might want to allow your users to localize URLs, in that case here’s an example of how to compose Localized Input to get the desired result. The main parts are the prependContent and resultFormatter props.
import {Provider } from '@clayui/core' ;
import LocalizedInput from '@clayui/localized-input' ;
import React from 'react' ;
export default function App () {
const locales = [
{
label : 'en-US' ,
symbol : 'en-us' ,
},
{
label : 'es-ES' ,
symbol : 'es-es' ,
},
{
label : 'fr-FR' ,
symbol : 'fr-fr' ,
},
{
label : 'hr-HR' ,
symbol : 'hr-hr' ,
},
];
const [selectedLocale , setSelectedLocale ] = React .useState (locales [0 ]);
const [translations , setTranslations ] = React .useState ({
'en-US' : 'Apple' ,
'es-ES' : 'Manzana' ,
});
const prepend = '/home/' ;
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<LocalizedInput
id = "locale2"
label = "As a URL"
locales = {locales }
onSelectedLocaleChange = {setSelectedLocale }
onTranslationsChange = {setTranslations }
prependContent = {prepend }
resultFormatter = {(value ) => 'https://liferay.com' + prepend + value }
selectedLocale = {selectedLocale }
translations = {translations }
/>
</div >
</Provider >
);
}Show code API Reference React .ForwardRefExoticComponent < IProps & React .RefAttributes < HTMLInputElement >>
Parameters Properties ariaLabels { default : string ; openLocalizations : string ; translated : string ; untranslated : string ; } | undefined
Labels for the aria attributes
helpText React .ReactText | undefined
Add informational text at the top of Localized Input.
label React .ReactText | undefined
Label of the input
prependContent React .ReactText | undefined
Content to be prepended in case you want to localize a URL.
List of locales to allow localization for
onSelectedLocaleChange * (val : IItem ) => void
Callback that gets called when a selected locale gets changed
onTranslationsChange * (val : ITranslations ) => void
Callback that gets called when a translation of the selected locale gets changed
resultFormatter ((val : string ) => React .ReactNode ) | undefined
Allows specifying custom formatter, for example for formatting URLs, to be output after translating
Exposes the currently selected locale
spritemap string | undefined
Path to the location of the spritemap resource.
translations * ITranslations
Translations provided to the component to be used and modified by it
Returns ReactElement<any, string | JSXElementConstructor<any>> | null
Edit this page on GitHub Contributors
Matuzalém Teles, Bryce Osterhaus, Krešimir Čoko
Last edited May 11, 2025 at 5:57:01 PM
