Input Group
View in LexiconA 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
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.
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.
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
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.
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>
);
}
Table of Contents