Input Group

A Text Input with added elements that provide a more complex input structure.

install	yarn add @clayui/form
version
use	`import ClayForm, {ClayInput} from '@clayui/form';`

Table of Contents

Groups
Example
Sizes
Checkboxes and Radios
Button Addons
Multiple Addons
Separated Addons
Mixed Addons
Inset
Password

Groups

Clay Input Group markup deviates from Bootstrap 4’s Input Groups.

Example

<div className="form-group">
	<div className="input-group">
		<div
			className="input-group-item input-group-item-shrink input-group-prepend"
		>
			<button className="btn btn-secondary" type="button">Search</button>
		</div>
		<div className="input-group-append input-group-item">
			<input
				aria-label="Search for"
				className="form-control"
				placeholder="Search for..."
				type="text"
			/>
		</div>
	</div>
</div>

<div className="form-group">
	<div className="input-group">
		<div className="input-group-item input-group-prepend">
			<input
				aria-label="Search for second one"
				className="form-control"
				value="email-example@liferay.com"
				type="email"
			/>
		</div>
		<span
			className="input-group-append input-group-item input-group-item-shrink"
		>
			<button className="btn btn-secondary" type="button">Submit</button>
		</span>
	</div>
</div>

Sizes

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Sizing on the individual input group elements isn’t supported.

.00

<div className="form-group">
	<div className="input-group input-group-lg">
		<div
			className="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span className="input-group-text">$</span>
		</div>
		<div className="input-group-prepend input-group-item">
			<input
				aria-label="Amount (to the nearest dollar)"
				className="form-control"
				type="text"
			/>
		</div>
		<div
			className="input-group-append input-group-item input-group-item-shrink"
		>
			<span className="input-group-text">.00</span>
		</div>
	</div>
</div>
<div className="form-group">
	<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-item input-group-prepend">
			<input
				aria-label="Amount (to the nearest dollar)"
				className="form-control"
				type="text"
			/>
		</div>
		<div className="input-group-append input-group-item-shrink">
			<span className="input-group-text">.00</span>
		</div>
	</div>
</div>
<div className="form-group">
	<div className="input-group input-group-sm">
		<div
			className="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span className="input-group-text">$</span>
		</div>
		<div className="input-group-item input-group-prepend">
			<input
				aria-label="Amount (to the neareset dollar)"
				className="form-control"
				type="text"
			/>
		</div>
		<div
			className="input-group-append input-group-item input-group-item-shrink"
		>
			<span className="input-group-text">.00</span>
		</div>
	</div>
</div>

Checkboxes and Radios

Place any checkbox or radio option within an input group’s addon instead of text.

<div className="form-group">
	<div className="input-group">
		<div
			className="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span className="input-group-text input-group-text-secondary">
				<div className="custom-control custom-checkbox">
					<label>
						<input
							aria-label="Checkbox for following text input"
							className="custom-control-input"
							type="checkbox"
						/>
						<span className="custom-control-label"></span>
					</label>
				</div>
			</span>
		</div>
		<div className="input-group-append input-group-item">
			<input
				aria-label="Text input with checkbox"
				className="form-control"
				value="Select this option?"
				type="text"
			/>
		</div>
	</div>
</div>

<div className="form-group">
	<div className="input-group">
		<div
			className="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span className="input-group-text input-group-text-secondary">
				<div className="custom-control custom-radio">
					<label>
						<input
							aria-label="Radio button for following text input"
							className="custom-control-input"
							type="radio"
						/>
						<span className="custom-control-label"></span>
					</label>
				</div>
			</span>
		</div>
		<div className="input-group-append input-group-item">
			<input
				aria-label="Text input with radio button"
				className="form-control"
				type="text"
				value="Select this option?"
			/>
		</div>
	</div>
</div>

Button Addons

<div className="form-group">
	<div className="input-group">
		<div
			className="input-group-item input-group-item-shrink input-group-prepend"
		>
			<button className="btn btn-secondary" type="button">Search</button>
		</div>
		<div className="input-group-append input-group-item">
			<input
				aria-label="Search for"
				className="form-control"
				placeholder="Search for..."
				type="text"
			/>
		</div>
	</div>
</div>

<div className="form-group">
	<div className="input-group">
		<div
			className="input-group-item input-group-item-shrink input-group-prepend"
		>
			<button
				aria-expanded="false"
				aria-haspopup="true"
				className="btn btn-secondary dropdown-toggle"
				data-toggle="dropdown"
				type="button"
			>
				Action<span className="inline-item inline-item-after"
					><svg
						className="lexicon-icon lexicon-icon-caret-bottom"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#caret-bottom" /></svg
				></span>
			</button>
			<ul className="dropdown-menu">
				<li><a className="dropdown-item" href="#1">Action</a></li>
				<li>
					<a className="dropdown-item" href="#1">Another action</a>
				</li>
				<li>
					<a className="dropdown-item" href="#1"
						>Something else here</a
					>
				</li>
				<li className="dropdown-divider"></li>
				<li>
					<a className="dropdown-item" href="#1">Separated link</a>
				</li>
			</ul>
		</div>
		<div className="input-group-append input-group-item">
			<input
				aria-label="Text input with dropdown button"
				className="form-control"
				type="text"
			/>
		</div>
	</div>
</div>

<div className="form-group">
	<div className="input-group">
		<div className="input-group-item input-group-prepend">
			<input
				aria-label="Text input with segmented button dropdown"
				className="form-control"
				type="text"
			/>
		</div>
		<div
			className="input-group-prepend input-group-item input-group-item-shrink"
		>
			<button className="btn btn-secondary" type="button">Action</button>
		</div>
		<div
			className="input-group-append input-group-item input-group-item-shrink"
		>
			<button
				aria-expanded="false"
				aria-haspopup="true"
				className="btn btn-secondary dropdown-toggle"
				data-toggle="dropdown"
				type="button"
			>
				<span className="inline-item">
					<svg
						className="lexicon-icon lexicon-icon-caret-bottom"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#caret-bottom" />
					</svg>
				</span>
			</button>
			<ul className="dropdown-menu dropdown-menu-right">
				<li><a className="dropdown-item" href="#1">Action</a></li>
				<li>
					<a className="dropdown-item" href="#1">Another action</a>
				</li>
				<li>
					<a className="dropdown-item" href="#1"
						>Something else here</a
					>
				</li>
				<li className="dropdown-divider"></li>
				<li>
					<a className="dropdown-item" href="#1">Separated link</a>
				</li>
			</ul>
		</div>
	</div>
</div>

Multiple Addons

.com

<div className="form-group">
	<div className="input-group">
		<div className="input-group-item input-group-prepend">
			<input
				className="form-control"
				placeholder="email-example"
				type="text"
			/>
		</div>
		<div
			className="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span className="input-group-text">@</span>
		</div>
		<div className="input-group-item input-group-prepend">
			<input className="form-control" placeholder="liferay" type="text" />
		</div>
		<div
			className="input-group-append input-group-item input-group-item-shrink"
		>
			<span className="input-group-text">.com</span>
		</div>
	</div>
</div>

Separated Addons

.com

<div className="form-group">
	<div className="input-group">
		<div className="input-group-item input-group-item-shrink">
			<span className="input-group-text" id="basicAddon1">@</span>
		</div>
		<div className="input-group-item">
			<input
				aria-describedby="basicAddon1"
				aria-label="Username"
				className="form-control"
				placeholder="Username"
				type="text"
			/>
		</div>
	</div>
</div>

<div className="form-group">
	<div className="input-group">
		<div className="input-group-item">
			<input className="form-control" placeholder="Email" type="text" />
		</div>
		<div className="input-group-item input-group-item-shrink">
			<span className="input-group-text">@</span>
		</div>
		<div className="input-group-item">
			<input className="form-control" placeholder="liferay" type="text" />
		</div>
		<div className="input-group-item input-group-item-shrink">
			<span className="input-group-text">.com</span>
		</div>
	</div>
</div>

Mixed Addons

<div className="form-group">
	<div className="input-group">
		<div className="input-group-item input-group-item-shrink">
			<span className="input-group-text" id="basicAddon1">@</span>
		</div>
		<div className="input-group-item input-group-prepend">
			<input
				aria-describedby="basicAddon1"
				aria-label="Username"
				className="form-control"
				placeholder="Username"
				type="text"
			/>
		</div>
		<div
			className="input-group-append input-group-item input-group-item-shrink"
		>
			<button className="btn btn-secondary" type="submit">Submit</button>
		</div>
	</div>
</div>

Inset

You can insert buttons and links into input group items with the following helper classes: .input-group-inset, .input-group-inset-before, .input-group-inset-after, .input-group-inset-item, .input-group-inset-item-before, and .input-group-inset-item-after. Use the -before classes to inset the button/link at the beginning of the input group, or use the -after classes to inset the button/link at the end of the input group.

To retain the focus styles around the .input-group-inset component when a button or link inside is focused, add the focus class to the .input-group-item. Focus Box Shadows are only supported in .input-group-inset with .input-group-item.focus. .input-prepend and .input-append aren’t supported with .input-group-inset.

<div className="input-group">
	<div className="input-group-item">
		<input
			aria-label="Search for"
			className="form-control input-group-inset input-group-inset-after"
			placeholder="Search..."
			type="text"
		/>
		<div className="input-group-inset-item input-group-inset-item-after">
			<button className="btn btn-unstyled d-md-none" type="button">
				<svg
					className="lexicon-icon lexicon-icon-times"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#times" />
				</svg>
			</button>
			<button
				className="btn btn-unstyled d-none d-md-inline-block"
				type="button"
			>
				<svg
					className="lexicon-icon lexicon-icon-search"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#search" />
				</svg>
			</button>
		</div>
	</div>
</div>

<div className="input-group">
	<div className="input-group-item">
		<input
			aria-label="Search for"
			className="form-control input-group-inset input-group-inset-after"
			placeholder="Search..."
			type="text"
		/>
		<div className="input-group-inset-item input-group-inset-item-after">
			<button className="btn btn-unstyled" type="button">
				<svg
					className="lexicon-icon lexicon-icon-times-circle"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#times-circle" />
				</svg>
			</button>
			<button className="btn btn-unstyled" type="button">
				<svg
					className="lexicon-icon lexicon-icon-search"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#search" />
				</svg>
			</button>
		</div>
	</div>
</div>

<div className="input-group">
	<div className="input-group-item">
		<input
			aria-label="Enter email"
			className="form-control input-group-inset input-group-inset-after"
			placeholder="Enter Email..."
			type="email"
		/>
		<div className="input-group-inset-item input-group-inset-item-after">
			<button className="btn btn-secondary" type="button">Submit</button>
		</div>
	</div>
</div>

<div className="input-group">
	<div className="input-group-item">
		<input
			aria-label="Search for"
			className="form-control input-group-inset input-group-inset-before"
			placeholder="Search..."
			type="text"
		/>
		<div className="input-group-inset-item input-group-inset-item-before">
			<button className="btn btn-unstyled" type="button">
				<svg
					className="lexicon-icon lexicon-icon-search"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#search" />
				</svg>
			</button>
		</div>
	</div>
</div>

<div className="input-group">
	<div className="input-group-item">
		<input
			aria-label="Enter email"
			className="form-control input-group-inset input-group-inset-before"
			placeholder="Enter Email..."
			type="email"
		/>
		<div className="input-group-inset-item input-group-inset-item-before">
			<button className="btn btn-secondary" type="button">Submit</button>
		</div>
	</div>
</div>

Password

A pattern for displaying the content inside a password input. Use .input-text-label inside .input-group-inset-item to display specific content for .form-control[type="text"] and .input-password-label for .form-control[type="password"].

This requires custom Javascript to toggle the input type between text and password.

Password Field Hidden

Password Field Visible

Password Field Disabled

<div className="form-group">
	<label for="passwordFieldHidden">Password Field Hidden</label>
	<div className="input-group input-group-password">
		<div className="input-group-item">
			<input
				aria-label="Password Hidden"
				className="form-control input-group-inset input-group-inset-after"
				id="passwordFieldHidden"
				type="password"
				value="my-seekret"
			/>
			<div
				className="input-group-inset-item input-group-inset-item-after"
			>
				<button className="btn btn-unstyled" type="button">
					<span className="input-text-label">
						<svg
							className="lexicon-icon lexicon-icon-hidden"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#hidden" />
						</svg>
					</span>
					<span className="input-password-label">
						<svg
							className="lexicon-icon lexicon-icon-view"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#view" />
						</svg>
					</span>
				</button>
			</div>
		</div>
	</div>
</div>

<div className="form-group">
	<label for="passwordFieldVisible">Password Field Visible</label>
	<div className="input-group input-group-password">
		<div className="input-group-item">
			<input
				aria-label="Password Visible"
				className="form-control input-group-inset input-group-inset-after"
				id="passwordFieldVisible"
				type="text"
				value="my-seekret"
			/>
			<div
				className="input-group-inset-item input-group-inset-item-after"
			>
				<button className="btn btn-secondary" type="button">
					<span className="input-password-label">Show</span>
					<span className="input-text-label">Hide</span>
				</button>
			</div>
		</div>
	</div>
</div>

<div className="form-group">
	<label className="disabled" for="passwordFieldDisabled"
		>Password Field Disabled</label
	>
	<div className="input-group input-group-password">
		<div className="input-group-item">
			<input
				aria-label="Password Disabled"
				className="form-control input-group-inset input-group-inset-after"
				disabled=""
				id="passwordFieldDisabled"
				type="password"
				value="my-seekret"
			/>
			<div
				className="input-group-inset-item input-group-inset-item-after"
			>
				<button className="btn btn-unstyled" disabled="" type="button">
					<span className="input-password-label">
						<svg
							className="lexicon-icon lexicon-icon-view"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#search" />
						</svg>
					</span>
					<span className="input-text-label">
						<svg
							className="lexicon-icon lexicon-icon-view"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#search" />
						</svg>
					</span>
				</button>
			</div>
		</div>
	</div>
</div>

Edit this page on GitHub

Contributors

Table of Contents

Groups
Example
Sizes
Checkboxes and Radios
Button Addons
Multiple Addons
Separated Addons
Mixed Addons
Inset
Password