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

Separated
Connected
Mixed
Stacked
API Reference

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 from 'react';

export default function App() {
  return (
    <Provider spritemap="/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 from 'react';

export default function App() {
  return (
    <Provider spritemap="/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 from 'react';

export default function App() {
  return (
    <Provider spritemap="/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 from 'react';

export default function App() {
  return (
    <Provider spritemap="/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

Contributors

Matuzalém Teles, Patrick Yeo

Last edited May 11, 2025 at 5:57:01 PM

Table of Contents

Separated
Connected
Mixed
Stacked
API Reference