Clay
Skip to ContentClayClay by Liferay
  • Get Started
    • Introduction
    • What is Clay
    • Importing the JS Component
    • Using JS Components with Metal.js
    • Web Components
  • Foundations
    • Grid
    • Typography
  • Lexicon Core Components
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Advanced Examples
        • Axis Label
        • Axis Range
        • Data Color
        • Gridlines
        • Predictive forecasting
        • Regions
        • X Axis Tick Formatting
      • Basic Examples
        • Bar Chart
        • Bubble Chart
        • Combination Chart
        • Donut Chart
        • Gauge Chart
        • Geomap Chart
        • Line Chart
        • Pie Chart
        • Scatter Chart
        • Spline Chart
        • Step Chart
    • Dataset Display
    • Dropdown Menu
    • Forms
      • Checkbox, Radio, and Toggle
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumbs
      • Navigation Bar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bars
    • Sidebar
      • Info Panel
    • Stickers
    • Table
      • Inline Edit Table
      • Table
    • Tabs
    • Toolbars
      • Management Toolbar
  • CSS Framework
    • SCSS
    • Class Helpers
    • Satellite Components
      • Alerts
      • Badges
      • Button Group
      • Cards
      • Dropdown Menu
      • Forms
        • Form Elements
        • Form Elements (Input Groups)
        • Form Elements (Validation)
      • Images (Aspect Ratios)
      • Images and Thumbnails
      • Labels
      • Links
      • List Groups
      • Modals
      • Nav
      • Navigation
        • Header
      • Paginations
      • Panels
      • Popovers and Tooltips
      • Progress Bars
      • Stickers
      • Tables
      • Tbar (Toolbar)
      • Timelines
      • Toggle Switch
    • Page Examples
      • Card View Template
      • Document Upload
      • List View Template
      • Table View Template
      • Users and Organizations
  • News

Text Input Localizable

Description

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

Check the Lexicon Text Input Localizable Pattern for a more in-depth look at the motivations and proper usage of this component.

Variations

Text area localizable

  • en-US Default
  • en-GB Translated
  • es-ES Translated
  • fr-FR Not Translated
.form-text
<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>

Text input group localizable

http://www.liferay.com
/
  • en-US Default
  • en-GB Translated
  • es-ES Translated
  • fr-FR Not Translated
http://www.liferay.com/en-us/clay
<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 class="form-text">http://www.liferay.com/en-us/clay</div>
	</div>
</div>

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.