Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Focus Trap
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Reduced Motion
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Localized Input

A text input variation used in fields that can be translated into multiple languages.

installyarn add @clayui/localized-input
version3.105.0
  • Examples
  • Markup
  • API

Stable3.105.0View in LexiconCHANGELOGstorybook demos

PropertyDescription
ariaLabels
{ default: string; openLocalizations: string; translated: string; untranslated: string; }
Labels for the aria attributes

The default value is { default: 'Default', openLocalizations: 'Open Localizations', translated: 'Translated', untranslated: 'Untranslated', }
helpText
React.ReactText
Add informational text at the top of Localized Input.
label
React.ReactText
Label of the input

The default value is 'Check for translations'
prependContent
React.ReactText
Content to be prepended in case you want to localize a URL.
locales
Array<IItem>
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
Allows specifying custom formatter, for example for formatting URLs, to be output after translating

The default value is (val) => val
selectedLocale
IItem
Exposes the currently selected locale
spritemap
string
Path to the location of the spritemap resource.
translations
ITranslations
Translations provided to the component to be used and modified by it
placeholder


The default value is 'Text to translate...'

How can this be improved? Create an issue!