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

  • Example
  • Textarea

Example

http://www.liferay.com
/
  • en-US Default
  • en-GB Translated
  • es-ES Translated
  • fr-FR Not Translated
http://www.liferay.com/en-us/clay
Copied!
Code Sample (expand to see it)
<div class="form-group">
	<label for="localizableInput1">Liferay</label>
	<div class="form-text">http://www.liferay.com</div>
	<div class="input-group">
		<div
			class="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span class="input-group-text">/</span>
		</div>
		<div class="input-group-append input-group-item">
			<input
				class="form-control"
				id="localizableInput1"
				placeholder="es-es/clay"
				type="text"
				value="es-es/clay"
			/>
		</div>
		<div class="input-group-item input-group-item-shrink">
			<button
				aria-expanded="false"
				aria-haspopup="true"
				class="btn btn-monospaced btn-secondary dropdown-toggle"
				data-toggle="dropdown"
				type="button"
			>
				<span class="inline-item">
					<svg
						class="lexicon-icon lexicon-icon-es-es"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#es-es"></use>
					</svg>
				</span>
				<span class="btn-section">es-ES</span>
			</button>
			<ul class="dropdown-menu dropdown-menu-right">
				<li>
					<a class="autofit-row dropdown-item" href="#1">
						<span class="autofit-col autofit-col-expand">
							<span class="autofit-section">
								<span class="inline-item inline-item-before">
									<svg
										class="lexicon-icon lexicon-icon-en-us"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#en-us"
										></use>
									</svg>
								</span>
								en-US
							</span>
						</span>
						<span class="autofit-col">
							<span class="label label-info">
								<span class="label-item label-item-expand"
									>Default</span
								>
							</span>
						</span>
					</a>
				</li>
				<li>
					<a class="autofit-row dropdown-item" href="#1">
						<span class="autofit-col autofit-col-expand">
							<span class="autofit-section">
								<span class="inline-item inline-item-before">
									<svg
										class="lexicon-icon lexicon-icon-en-gb"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#en-gb"
										></use>
									</svg>
								</span>
								en-GB
							</span>
						</span>
						<span class="autofit-col">
							<span class="label label-success">
								<span class="label-item label-item-expand"
									>Translated</span
								>
							</span>
						</span>
					</a>
				</li>
				<li>
					<a class="active autofit-row dropdown-item" href="#1">
						<span class="autofit-col autofit-col-expand">
							<span class="autofit-section">
								<span class="inline-item inline-item-before">
									<svg
										class="lexicon-icon lexicon-icon-es-es"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#es-es"
										></use>
									</svg>
								</span>
								es-ES
							</span>
						</span>
						<span class="autofit-col">
							<span class="label label-success">
								<span class="label-item label-item-expand"
									>Translated</span
								>
							</span>
						</span>
					</a>
				</li>
				<li>
					<a class="autofit-row dropdown-item" href="#1">
						<span class="autofit-col autofit-col-expand">
							<span class="autofit-section">
								<span class="inline-item inline-item-before">
									<svg
										class="lexicon-icon lexicon-icon-fr-fr"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#fr-fr"
										></use>
									</svg>
								</span>
								fr-FR
							</span>
						</span>
						<span class="autofit-col">
							<span class="label label-warning">
								<span class="label-item label-item-expand"
									>Not Translated</span
								>
							</span>
						</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="form-text">http://www.liferay.com/en-us/clay</div>
</div>

Textarea

  • en-US Default
  • en-GB Translated
  • es-ES Translated
  • fr-FR Not Translated
.form-text
Copied!
Code Sample (expand to see it)
<div class="form-group">
	<label for="basicInputTypeTextarea">Product Description</label>
	<div class="input-group">
		<div class="input-group-item">
			<textarea
				class="form-control"
				id="basicInputTypeTextarea"
				placeholder="Placeholder"
			></textarea>
		</div>
		<div class="input-group-item input-group-item-shrink">
			<button
				aria-expanded="false"
				aria-haspopup="true"
				class="btn btn-monospaced btn-secondary dropdown-toggle"
				data-toggle="dropdown"
				type="button"
			>
				<span class="inline-item">
					<svg
						class="lexicon-icon lexicon-icon-es-es"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#es-es"></use>
					</svg>
				</span>
				<span class="btn-section">es-ES</span>
			</button>
			<ul class="dropdown-menu dropdown-menu-right">
				<li>
					<a class="autofit-row dropdown-item" href="#1">
						<span class="autofit-col autofit-col-expand">
							<span class="autofit-section">
								<span class="inline-item inline-item-before">
									<svg
										class="lexicon-icon lexicon-icon-en-us"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#en-us"
										></use>
									</svg>
								</span>
								en-US
							</span>
						</span>
						<span class="autofit-col">
							<span class="label label-info">
								<span class="label-item label-item-expand"
									>Default</span
								>
							</span>
						</span>
					</a>
				</li>
				<li>
					<a class="autofit-row dropdown-item" href="#1">
						<span class="autofit-col autofit-col-expand">
							<span class="autofit-section">
								<span class="inline-item inline-item-before">
									<svg
										class="lexicon-icon lexicon-icon-en-gb"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#en-gb"
										></use>
									</svg>
								</span>
								en-GB
							</span>
						</span>
						<span class="autofit-col">
							<span class="label label-success">
								<span class="label-item label-item-expand"
									>Translated</span
								>
							</span>
						</span>
					</a>
				</li>
				<li>
					<a class="active autofit-row dropdown-item" href="#1">
						<span class="autofit-col autofit-col-expand">
							<span class="autofit-section">
								<span class="inline-item inline-item-before">
									<svg
										class="lexicon-icon lexicon-icon-es-es"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#es-es"
										></use>
									</svg>
								</span>
								es-ES
							</span>
						</span>
						<span class="autofit-col">
							<span class="label label-success">
								<span class="label-item label-item-expand"
									>Translated</span
								>
							</span>
						</span>
					</a>
				</li>
				<li>
					<a class="autofit-row dropdown-item" href="#1">
						<span class="autofit-col autofit-col-expand">
							<span class="autofit-section">
								<span class="inline-item inline-item-before">
									<svg
										class="lexicon-icon lexicon-icon-fr-fr"
										focusable="false"
										role="presentation"
									>
										<use
											href="/images/icons/icons.svg#fr-fr"
										></use>
									</svg>
								</span>
								fr-FR
							</span>
						</span>
						<span class="autofit-col">
							<span class="label label-warning">
								<span class="label-item label-item-expand"
									>Not Translated</span
								>
							</span>
						</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="form-text">.form-text</div>
</div>

How can this be improved? Create an issue!