Input Group

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

installyarn add @clayui/form
versionNPM Version
useimport ClayForm, {ClayInput} from '@clayui/form';

Table of Contents

If you want to create groups of inputs, use <ClayInput.Group>, <ClayInput.GroupInsetItem>, <ClayInput.GroupItem> and <ClayInput.GroupText>.

Separated

Wrap each item in a <ClayInput.Group> with <ClayInput.GroupItem>. If you want to make an item shrink to fit, use the shrink property.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Form, {ClayInput} from '@clayui/form';
import ClayButton from '@clayui/button';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<>
					<Form.Group>
						<ClayInput.Group>
							<ClayInput.GroupItem shrink>
								<ClayButton
									displayType="secondary"
									type="submit"
								>
									Search
								</ClayButton>
							</ClayInput.GroupItem>
							<ClayInput.GroupItem>
								<ClayInput
									placeholder="Search Query"
									type="text"
								/>
							</ClayInput.GroupItem>
						</ClayInput.Group>
					</Form.Group>
					<Form.Group>
						<ClayInput.Group>
							<ClayInput.GroupItem shrink>
								<ClayInput.GroupText>$</ClayInput.GroupText>
							</ClayInput.GroupItem>
							<ClayInput.GroupItem>
								<ClayInput placeholder="5,000" type="text" />
							</ClayInput.GroupItem>
							<ClayInput.GroupItem shrink>
								<ClayInput.GroupText>.00</ClayInput.GroupText>
							</ClayInput.GroupItem>
						</ClayInput.Group>
					</Form.Group>
				</>
			</div>
		</Provider>
	);
}

Connected

For creating a connected input group, use prepend property for each <ClayInput.GroupItem> and for the last <ClayInput.GroupItem> use the property append.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Form, {ClayInput} from '@clayui/form';
import ClayButton from '@clayui/button';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<>
					<Form.Group>
						<ClayInput.Group>
							<ClayInput.GroupItem shrink prepend>
								<ClayButton
									displayType="secondary"
									type="submit"
								>
									Search
								</ClayButton>
							</ClayInput.GroupItem>
							<ClayInput.GroupItem append>
								<ClayInput
									placeholder="Search Query"
									type="text"
								/>
							</ClayInput.GroupItem>
						</ClayInput.Group>
					</Form.Group>
					<Form.Group>
						<ClayInput.Group>
							<ClayInput.GroupItem prepend>
								<ClayInput placeholder="Email" type="text" />
							</ClayInput.GroupItem>
							<ClayInput.GroupItem append shrink>
								<ClayInput.GroupText>
									@liferay.com
								</ClayInput.GroupText>
							</ClayInput.GroupItem>
						</ClayInput.Group>
					</Form.Group>
					<Form.Group>
						<ClayInput.Group>
							<ClayInput.GroupItem shrink prepend>
								<ClayInput.GroupText>$</ClayInput.GroupText>
							</ClayInput.GroupItem>
							<ClayInput.GroupItem prepend>
								<ClayInput placeholder="5,000" type="text" />
							</ClayInput.GroupItem>
							<ClayInput.GroupItem append shrink>
								<ClayInput.GroupText>.00</ClayInput.GroupText>
							</ClayInput.GroupItem>
						</ClayInput.Group>
					</Form.Group>
				</>
			</div>
		</Provider>
	);
}

Mixed

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Form, {ClayInput} from '@clayui/form';
import ClayButton from '@clayui/button';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Form.Group>
					<ClayInput.Group>
						<ClayInput.GroupItem shrink>
							<ClayInput.GroupText>@</ClayInput.GroupText>
						</ClayInput.GroupItem>
						<ClayInput.GroupItem prepend>
							<ClayInput placeholder="Username" type="text" />
						</ClayInput.GroupItem>
						<ClayInput.GroupItem append shrink>
							<ClayButton displayType="secondary" type="submit">
								Submit
							</ClayButton>
						</ClayInput.GroupItem>
					</ClayInput.Group>
				</Form.Group>
			</div>
		</Provider>
	);
}

Stacked

For creating a stack of the items inside a item group, use stacked property in the <ClayInput.Group> and use shrink property for using in screens sizes less than 576px.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Form, {ClayInput} from '@clayui/form';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Form.Group>
					<ClayInput.Group stacked>
						<ClayInput.GroupItem prepend>
							<ClayInput placeholder="Email" type="text" />
						</ClayInput.GroupItem>
						<ClayInput.GroupItem shrink prepend>
							<ClayInput.GroupText>@</ClayInput.GroupText>
						</ClayInput.GroupItem>
						<ClayInput.GroupItem prepend>
							<ClayInput placeholder="liferay" type="text" />
						</ClayInput.GroupItem>
						<ClayInput.GroupItem append shrink>
							<ClayInput.GroupText>.com</ClayInput.GroupText>
						</ClayInput.GroupItem>
					</ClayInput.Group>
				</Form.Group>
			</div>
		</Provider>
	);
}

API Reference

GroupItem

React.ForwardRefExoticComponent<IGroupItemProps & React.RefAttributes<HTMLDivElement>>
Parameters
Properties

append

boolean | undefined

Flag to indicate if input-group-append class should be applied

prepend

boolean | undefined

Flag to indicate if input-group-prepend class should be applied

shrink

boolean | undefined

Flag to indicate if input-group-item-shrink class should be applied

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

Group

React.ForwardRefExoticComponent<IGroupProps & React.RefAttributes<HTMLDivElement>>
Parameters
Properties

small

boolean | undefined

Flag to indicate if input-group-sm class should be applied

stacked

boolean | undefined

Flag to indicate if input-group-stacked-sm-down class should be applied.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

GroupText

React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>

Input

IForwardRef<HTMLInputElement, IProps>
Parameters
Properties

component

"input" | "textarea" | React.ForwardRefExoticComponent<any> | undefined

Input component to render. Can either be a string like 'input' or 'textarea' or a component.

insetAfter

boolean | undefined

Flag to indicate if input-group-inset-after class should be applied

insetBefore

boolean | undefined

Flag to indicate if input-group-inset-before class should be applied

sizing

"lg" | "regular" | "sm" | undefined

Selects the height of the input.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

Input

IForwardRef<HTMLInputElement, IProps>
Parameters
Properties

component

"input" | "textarea" | React.ForwardRefExoticComponent<any> | undefined

Input component to render. Can either be a string like 'input' or 'textarea' or a component.

insetAfter

boolean | undefined

Flag to indicate if input-group-inset-after class should be applied

insetBefore

boolean | undefined

Flag to indicate if input-group-inset-before class should be applied

sizing

"lg" | "regular" | "sm" | undefined

Selects the height of the input.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null
Edit this page on GitHub

Table of Contents