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

Snippet

<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

Snippet

<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.

Snippet

<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

Snippet

<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="/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="/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

Snippet

<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

Snippet

<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

Snippet

<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.

Snippet

<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="/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="/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="/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="/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="/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

Snippet

<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="/icons.svg#hidden" />
            </svg>
          </span>
          <span className="input-password-label">
            <svg
              className="lexicon-icon lexicon-icon-view"
              focusable="false"
              role="presentation"
            >
              <use href="/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="/icons.svg#search" />
            </svg>
          </span>
          <span className="input-text-label">
            <svg
              className="lexicon-icon lexicon-icon-view"
              focusable="false"
              role="presentation"
            >
              <use href="/icons.svg#search" />
            </svg>
          </span>
        </button>
      </div>
    </div>
  </div>
</div>

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM

Table of Contents

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