Localized Input

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';`

Example

Liferay

http://www.liferay.com

http://www.liferay.com/en-us/clay

<div className="form-group">
	<label for="localizableInput1">Liferay</label>
	<div className="form-text">http://www.liferay.com</div>
	<div className="input-group">
		<div
			className="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span className="input-group-text">/</span>
		</div>
		<div className="input-group-append input-group-item">
			<input
				className="form-control"
				id="localizableInput1"
				placeholder="es-es/clay"
				type="text"
				value="es-es/clay"
			/>
		</div>
		<div className="input-group-item input-group-item-shrink">
			<button
				aria-expanded="false"
				aria-haspopup="true"
				className="btn btn-monospaced btn-secondary dropdown-toggle"
				data-toggle="dropdown"
				type="button"
			>
				<span className="inline-item">
					<svg
						className="lexicon-icon lexicon-icon-es-es"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#es-es"></use>
					</svg>
				</span>
				<span className="btn-section">es-ES</span>
			</button>
			<ul className="dropdown-menu dropdown-menu-right">
				<li>
					<a className="autofit-row dropdown-item" href="#1">
						<span className="autofit-col autofit-col-expand">
							<span className="autofit-section">
								<span
									className="inline-item inline-item-before"
								>
									<svg
										className="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 className="autofit-col">
							<span className="label label-info">
								<span className="label-item label-item-expand"
									>Default</span
								>
							</span>
						</span>
					</a>
				</li>
				<li>
					<a className="autofit-row dropdown-item" href="#1">
						<span className="autofit-col autofit-col-expand">
							<span className="autofit-section">
								<span
									className="inline-item inline-item-before"
								>
									<svg
										className="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 className="autofit-col">
							<span className="label label-success">
								<span className="label-item label-item-expand"
									>Translated</span
								>
							</span>
						</span>
					</a>
				</li>
				<li>
					<a className="active autofit-row dropdown-item" href="#1">
						<span className="autofit-col autofit-col-expand">
							<span className="autofit-section">
								<span
									className="inline-item inline-item-before"
								>
									<svg
										className="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 className="autofit-col">
							<span className="label label-success">
								<span className="label-item label-item-expand"
									>Translated</span
								>
							</span>
						</span>
					</a>
				</li>
				<li>
					<a className="autofit-row dropdown-item" href="#1">
						<span className="autofit-col autofit-col-expand">
							<span className="autofit-section">
								<span
									className="inline-item inline-item-before"
								>
									<svg
										className="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 className="autofit-col">
							<span className="label label-warning">
								<span className="label-item label-item-expand"
									>Not Translated</span
								>
							</span>
						</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div className="form-text">http://www.liferay.com/en-us/clay</div>
</div>

Textarea

Product Description

.form-text

<div className="form-group">
	<label for="basicInputTypeTextarea">Product Description</label>
	<div className="input-group">
		<div className="input-group-item">
			<textarea
				className="form-control"
				id="basicInputTypeTextarea"
				placeholder="Placeholder"
			></textarea>
		</div>
		<div className="input-group-item input-group-item-shrink">
			<button
				aria-expanded="false"
				aria-haspopup="true"
				className="btn btn-monospaced btn-secondary dropdown-toggle"
				data-toggle="dropdown"
				type="button"
			>
				<span className="inline-item">
					<svg
						className="lexicon-icon lexicon-icon-es-es"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#es-es"></use>
					</svg>
				</span>
				<span className="btn-section">es-ES</span>
			</button>
			<ul className="dropdown-menu dropdown-menu-right">
				<li>
					<a className="autofit-row dropdown-item" href="#1">
						<span className="autofit-col autofit-col-expand">
							<span className="autofit-section">
								<span
									className="inline-item inline-item-before"
								>
									<svg
										className="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 className="autofit-col">
							<span className="label label-info">
								<span className="label-item label-item-expand"
									>Default</span
								>
							</span>
						</span>
					</a>
				</li>
				<li>
					<a className="autofit-row dropdown-item" href="#1">
						<span className="autofit-col autofit-col-expand">
							<span className="autofit-section">
								<span
									className="inline-item inline-item-before"
								>
									<svg
										className="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 className="autofit-col">
							<span className="label label-success">
								<span className="label-item label-item-expand"
									>Translated</span
								>
							</span>
						</span>
					</a>
				</li>
				<li>
					<a className="active autofit-row dropdown-item" href="#1">
						<span className="autofit-col autofit-col-expand">
							<span className="autofit-section">
								<span
									className="inline-item inline-item-before"
								>
									<svg
										className="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 className="autofit-col">
							<span className="label label-success">
								<span className="label-item label-item-expand"
									>Translated</span
								>
							</span>
						</span>
					</a>
				</li>
				<li>
					<a className="autofit-row dropdown-item" href="#1">
						<span className="autofit-col autofit-col-expand">
							<span className="autofit-section">
								<span
									className="inline-item inline-item-before"
								>
									<svg
										className="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 className="autofit-col">
							<span className="label label-warning">
								<span className="label-item label-item-expand"
									>Not Translated</span
								>
							</span>
						</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div className="form-text">.form-text</div>
</div>

Edit this page on GitHub

Contributors

Table of Contents

Example
Textarea