Multi Select

View in Lexicon

Multi select is the field type that allows writing text to create “tags” that are represented in the shape of labels.

install	yarn add @clayui/multi-select
version
use	`import MultiSelect from '@clayui/multi-select';`

Table of Contents

Example
Labels
Loading
Contenteditable Elements
Sizes
Small

Don’t forget to check WAI-ARIAaccessibility pratices for grids when writting your markup.

Don’t forget to check WAI-ARIAaccessibility pratices for search when writting your markup.

Example

This requires external javascript to populate, add labels, and show/hide the dropdown-menu.

Tags

You can use a comma to enter tags.

Snippet

<div className="form-group">
  <label for="tagsField1">Tags</label>
  <div className="input-group input-group-stacked-sm-down">
    <div className="input-group-item">
      <div className="dropdown">
        <div className="form-control form-control-tag-group">
          <span className="autofit-row">
            <span className="autofit-col autofit-col-expand">
              <input
                className="form-control-inset"
                id="tagsField1"
                type="text"
                value="some value"
              />
            </span>
          </span>
        </div>
        <ul className="autocomplete-dropdown-menu dropdown-menu">
          <li>
            <a className="dropdown-item" href="#1"
              ><strong>some value</strong></a
            >
          </li>
          <li>
            <a className="dropdown-item" href="#1"
              ><strong>some value</strong> meal</a
            >
          </li>
        </ul>
      </div>
      <div className="form-feedback-group">
        <div className="form-text">You can use a comma to enter tags.</div>
      </div>
    </div>
    <div className="input-group-item input-group-item-shrink">
      <button className="btn btn-secondary" type="button">Select</button>
    </div>
  </div>
</div>

Labels

Tags

You can use a comma to enter tags.

Snippet

<div className="form-group">
  <label for="tagsField2">Tags</label>
  <div className="input-group input-group-stacked-sm-down">
    <div className="input-group-item">
      <div className="dropdown">
        <div className="form-control form-control-tag-group">
          <span
            className="label label-dismissible label-secondary"
            tabindex="0"
          >
            <span className="label-item label-item-before">
              <span className="sticker">
                <span className="sticker-overlay">
                  <img
                    alt="thumbnail"
                    className="sticker-img"
                    src="/images/thumbnail_dock.jpg"
                  />
                </span>
              </span>
            </span>
            <span className="label-item label-item-expand">wall</span>
            <span className="label-item label-item-after">
              <button
                aria-label="Close"
                className="close"
                tabindex="-1"
                type="button"
              >
                <svg
                  className="lexicon-icon lexicon-icon-times reference-mark"
                  focusable="false"
                  role="presentation"
                >
                  <use href="/icons.svg#times" />
                </svg>
              </button>
            </span>
          </span>
          <span
            className="label label-dismissible label-secondary"
            tabindex="0"
          >
            <span className="label-item label-item-before">
              <span className="sticker">
                <span className="sticker-overlay">
                  <img
                    alt="thumbnail"
                    className="sticker-img"
                    src="/images/thumbnail_dock.jpg"
                  />
                </span>
              </span>
            </span>
            <span className="label-item label-item-expand">wallpaper</span>
            <span className="label-item label-item-after">
              <button
                aria-label="Close"
                className="close"
                tabindex="-1"
                type="button"
              >
                <svg
                  className="lexicon-icon lexicon-icon-times reference-mark"
                  focusable="false"
                  role="presentation"
                >
                  <use href="/icons.svg#times" />
                </svg>
              </button>
            </span>
          </span>
          <span
            className="label label-dismissible label-secondary"
            tabindex="0"
          >
            <span className="label-item label-item-before">
              <span className="sticker">
                <span className="sticker-overlay">
                  <img
                    alt="thumbnail"
                    className="sticker-img"
                    src="/images/thumbnail_dock.jpg"
                  />
                </span>
              </span>
            </span>
            <span className="label-item label-item-expand">wonderwall</span>
            <span className="label-item label-item-after">
              <button
                aria-label="Close"
                className="close"
                tabindex="-1"
                type="button"
              >
                <svg
                  className="lexicon-icon lexicon-icon-times reference-mark"
                  focusable="false"
                  role="presentation"
                >
                  <use href="/icons.svg#times" />
                </svg>
              </button>
            </span>
          </span>
          <span
            className="label label-dismissible label-secondary"
            tabindex="0"
          >
            <span className="label-item label-item-expand">winterfell</span>
            <span className="label-item label-item-after">
              <button
                aria-label="Close"
                className="close"
                tabindex="-1"
                type="button"
              >
                <svg
                  className="lexicon-icon lexicon-icon-times reference-mark"
                  focusable="false"
                  role="presentation"
                >
                  <use href="/icons.svg#times" />
                </svg>
              </button>
            </span>
          </span>
          <span
            className="label label-dismissible label-secondary"
            tabindex="0"
          >
            <span className="label-item label-item-expand"
              >ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre</span
            >
            <span className="label-item label-item-after">
              <button
                aria-label="Close"
                className="close"
                tabindex="-1"
                type="button"
              >
                <svg
                  className="lexicon-icon lexicon-icon-times reference-mark"
                  focusable="false"
                  role="presentation"
                >
                  <use href="/icons.svg#times" />
                </svg>
              </button>
            </span>
          </span>
          <span className="autofit-row">
            <span className="autofit-col autofit-col-expand">
              <input
                className="form-control-inset"
                id="tagsField2"
                type="text"
                value="some value"
              />
            </span>
          </span>
        </div>
        <ul className="autocomplete-dropdown-menu dropdown-menu">
          <li>
            <a className="dropdown-item" href="#1"
              ><strong>some value</strong></a
            >
          </li>
          <li>
            <a className="dropdown-item" href="#1"
              ><strong>some value</strong> meal</a
            >
          </li>
        </ul>
      </div>
      <div className="form-feedback-group">
        <div className="form-text">You can use a comma to enter tags.</div>
      </div>
    </div>
    <div className="input-group-item input-group-item-shrink">
      <button className="btn btn-secondary" type="button">Select</button>
    </div>
  </div>
</div>

Loading

Tags

You can use a comma to enter tags.

Snippet

<div className="form-group">
  <label for="tagsField2">Tags</label>
  <div className="input-group input-group-stacked-sm-down">
    <div className="input-group-item">
      <div className="dropdown">
        <div className="form-control form-control-tag-group">
          <span
            className="label label-dismissible label-secondary"
            tabindex="0"
          >
            <span className="label-item label-item-before">
              <span className="sticker">
                <span className="sticker-overlay">
                  <img
                    alt="thumbnail"
                    className="sticker-img"
                    src="/images/thumbnail_dock.jpg"
                  />
                </span>
              </span>
            </span>
            <span className="label-item label-item-expand">wall</span>
            <span className="label-item label-item-after">
              <button
                aria-label="Close"
                className="close"
                tabindex="-1"
                type="button"
              >
                <svg
                  className="lexicon-icon lexicon-icon-times reference-mark"
                  focusable="false"
                  role="presentation"
                >
                  <use href="/icons.svg#times" />
                </svg>
              </button>
            </span>
          </span>
          <span
            className="label label-dismissible label-secondary"
            tabindex="0"
          >
            <span className="label-item label-item-before">
              <span className="sticker">
                <span className="sticker-overlay">
                  <img
                    alt="thumbnail"
                    className="sticker-img"
                    src="/images/thumbnail_dock.jpg"
                  />
                </span>
              </span>
            </span>
            <span className="label-item label-item-expand">wallpaper</span>
            <span className="label-item label-item-after">
              <button
                aria-label="Close"
                className="close"
                tabindex="-1"
                type="button"
              >
                <svg
                  className="lexicon-icon lexicon-icon-times reference-mark"
                  focusable="false"
                  role="presentation"
                >
                  <use href="/icons.svg#times" />
                </svg>
              </button>
            </span>
          </span>
          <span
            className="label label-dismissible label-secondary"
            tabindex="0"
          >
            <span className="label-item label-item-before">
              <span className="sticker">
                <span className="sticker-overlay">
                  <img
                    alt="thumbnail"
                    className="sticker-img"
                    src="/images/thumbnail_dock.jpg"
                  />
                </span>
              </span>
            </span>
            <span className="label-item label-item-expand">wonderwall</span>
            <span className="label-item label-item-after">
              <button
                aria-label="Close"
                className="close"
                tabindex="-1"
                type="button"
              >
                <svg
                  className="lexicon-icon lexicon-icon-times reference-mark"
                  focusable="false"
                  role="presentation"
                >
                  <use href="/icons.svg#times" />
                </svg>
              </button>
            </span>
          </span>
          <span className="autofit-row">
            <span className="autofit-col autofit-col-expand">
              <input
                className="form-control-inset"
                id="tagsField2"
                type="text"
                value="some value"
              />
            </span>
            <span className="autofit-col">
              <span className="inline-item">
                <span className="loading-animation" role="presentation"></span>
              </span>
            </span>
          </span>
        </div>
        <ul className="autocomplete-dropdown-menu dropdown-menu show">
          <li>
            <span className="disabled dropdown-item">Loading...</span>
          </li>
        </ul>
      </div>
      <div className="form-feedback-group">
        <div className="form-text">You can use a comma to enter tags.</div>
      </div>
    </div>
    <div className="input-group-item input-group-item-shrink">
      <button className="btn btn-secondary" type="button">Select All</button>
    </div>
  </div>
</div>

Contenteditable Elements

Label

You can use a comma to enter tags.

Snippet

<div className="form-group">
  <label for="formControlContentEditable1">Label</label>
  <div className="input-group input-group-stacked-sm-down">
    <div className="input-group-item">
      <div className="dropdown">
        <div className="form-control form-control-tag-group">
          <span className="autofit-row">
            <span className="autofit-col autofit-col-expand">
              <textarea
                aria-hidden="true"
                className="form-control-hidden"
                id="formControlContentEditable1"
                tabindex="-1"
              ></textarea>
              <div className="form-control-inset" contenteditable="true"></div>
            </span>
          </span>
        </div>
        <ul className="autocomplete-dropdown-menu dropdown-menu">
          <li>
            <a className="dropdown-item" href="#1"
              ><strong>some value</strong></a
            >
          </li>
          <li>
            <a className="dropdown-item" href="#1"
              ><strong>some value</strong> meal</a
            >
          </li>
        </ul>
      </div>
      <div className="form-feedback-group">
        <div className="form-text">You can use a comma to enter tags.</div>
      </div>
    </div>
    <div className="input-group-item input-group-item-shrink">
      <button className="btn btn-secondary" type="submit">Select</button>
    </div>
  </div>
</div>

Sizes

Small

The modifier class form-control-tag-group-sm on form-control-tag-group will render a smaller version of Clay Multi Select.

You can use a comma to enter tags.

Snippet

<div className="form-group">
  <div className="dropdown">
    <div
      className="form-control form-control-tag-group form-control-tag-group-sm"
    >
      <span className="autofit-row">
        <span className="autofit-col autofit-col-expand">
          <input
            className="form-control-inset"
            type="text"
            value="some value"
          />
        </span>
      </span>
    </div>
    <ul className="autocomplete-dropdown-menu dropdown-menu show">
      <li>
        <a className="dropdown-item" href="#1"><strong>some value</strong></a>
      </li>
      <li>
        <a className="dropdown-item" href="#1"
          ><strong>some value</strong> meal</a
        >
      </li>
    </ul>
  </div>
  <div className="form-feedback-group">
    <div className="form-text">You can use a comma to enter tags.</div>
  </div>
</div>

For variations with buttons, the modifier classes input-group-sm or form-group-sm can be added to input-group or form-group, respectively.

Tags with input-group-sm

You can use a comma to enter tags.

Snippet

<div className="form-group">
  <label for="tagsField3">Tags with input-group-sm</label>
  <div className="input-group input-group-stacked-sm-down input-group-sm">
    <div className="input-group-item">
      <div className="dropdown">
        <div className="form-control form-control-tag-group">
          <span className="autofit-row">
            <span className="autofit-col autofit-col-expand">
              <input
                className="form-control-inset"
                id="tagsField3"
                type="text"
                value="some value"
              />
            </span>
          </span>
        </div>
        <ul className="autocomplete-dropdown-menu dropdown-menu">
          <li>
            <a className="dropdown-item" href="#1"
              ><strong>some value</strong></a
            >
          </li>
          <li>
            <a className="dropdown-item" href="#1"
              ><strong>some value</strong> meal</a
            >
          </li>
        </ul>
      </div>
      <div className="form-feedback-group">
        <div className="form-text">You can use a comma to enter tags.</div>
      </div>
    </div>
    <div className="input-group-item input-group-item-shrink">
      <button className="btn btn-secondary" type="button">Select</button>
    </div>
  </div>
</div>

Tags with form-group-sm

You can use a comma to enter tags.

Snippet

<div className="form-group-sm">
  <label for="tagsField4">Tags with form-group-sm</label>
  <div className="input-group input-group-stacked-sm-down input-group-sm">
    <div className="input-group-item">
      <div className="dropdown">
        <div className="form-control form-control-tag-group">
          <span className="autofit-row">
            <span className="autofit-col autofit-col-expand">
              <input
                className="form-control-inset"
                id="tagsField4"
                type="text"
                value="some value"
              />
            </span>
          </span>
        </div>
        <ul className="autocomplete-dropdown-menu dropdown-menu">
          <li>
            <a className="dropdown-item" href="#1"
              ><strong>some value</strong></a
            >
          </li>
          <li>
            <a className="dropdown-item" href="#1"
              ><strong>some value</strong> meal</a
            >
          </li>
        </ul>
      </div>
      <div className="form-feedback-group">
        <div className="form-text">You can use a comma to enter tags.</div>
      </div>
    </div>
    <div className="input-group-item input-group-item-shrink">
      <button className="btn btn-secondary" type="button">Select</button>
    </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

Example
Labels
Loading
Contenteditable Elements
Sizes
Small