Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Focus Trap
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Reduced Motion
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Multi Select

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

installyarn add @clayui/multi-select
version3.105.0
  • Examples
  • Markup
  • API

Stable3.105.0View in LexiconCHANGELOGstorybook demos

  • Example
  • Labels
  • Loading
  • Contenteditable Elements
  • Sizes
    • Small
Don't forget to check WAI-ARIA accessibility pratices for grids when writting your markup.
Don't forget to check WAI-ARIA accessibility pratices for search when writting your markup.

Example

This requires external javascript to populate, add labels, and show/hide the dropdown-menu.
  • some value
  • some value meal
You can use a comma to enter tags.
Copied!
Code Sample (expand to see it)
<div class="form-group">
	<label for="tagsField1">Tags</label>
	<div class="input-group input-group-stacked-sm-down">
		<div class="input-group-item">
			<div class="dropdown">
				<div class="form-control form-control-tag-group">
					<span class="autofit-row">
						<span class="autofit-col autofit-col-expand">
							<input
								class="form-control-inset"
								id="tagsField1"
								type="text"
								value="some value"
							/>
						</span>
					</span>
				</div>
				<ul class="autocomplete-dropdown-menu dropdown-menu">
					<li>
						<a class="dropdown-item" href="#1"
							><strong>some value</strong></a
						>
					</li>
					<li>
						<a class="dropdown-item" href="#1"
							><strong>some value</strong> meal</a
						>
					</li>
				</ul>
			</div>
			<div class="form-feedback-group">
				<div class="form-text">You can use a comma to enter tags.</div>
			</div>
		</div>
		<div class="input-group-item input-group-item-shrink">
			<button class="btn btn-secondary" type="button">Select</button>
		</div>
	</div>
</div>

Labels

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

Loading

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

Contenteditable Elements

  • some value
  • some value meal
You can use a comma to enter tags.
Copied!
Code Sample (expand to see it)
<div class="form-group">
	<label for="formControlContentEditable1">Label</label>
	<div class="input-group input-group-stacked-sm-down">
		<div class="input-group-item">
			<div class="dropdown">
				<div class="form-control form-control-tag-group">
					<span class="autofit-row">
						<span class="autofit-col autofit-col-expand">
							<textarea
								aria-hidden="true"
								class="form-control-hidden"
								id="formControlContentEditable1"
								tabindex="-1"
							></textarea>
							<div
								class="form-control-inset"
								contenteditable="true"
							></div>
						</span>
					</span>
				</div>
				<ul class="autocomplete-dropdown-menu dropdown-menu">
					<li>
						<a class="dropdown-item" href="#1"
							><strong>some value</strong></a
						>
					</li>
					<li>
						<a class="dropdown-item" href="#1"
							><strong>some value</strong> meal</a
						>
					</li>
				</ul>
			</div>
			<div class="form-feedback-group">
				<div class="form-text">You can use a comma to enter tags.</div>
			</div>
		</div>
		<div class="input-group-item input-group-item-shrink">
			<button class="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.

  • some value
  • some value meal
You can use a comma to enter tags.
Copied!
Code Sample (expand to see it)
<div class="form-group">
	<div class="dropdown">
		<div
			class="form-control form-control-tag-group form-control-tag-group-sm"
		>
			<span class="autofit-row">
				<span class="autofit-col autofit-col-expand">
					<input
						class="form-control-inset"
						type="text"
						value="some value"
					/>
				</span>
			</span>
		</div>
		<ul class="autocomplete-dropdown-menu dropdown-menu show">
			<li>
				<a class="dropdown-item" href="#1"
					><strong>some value</strong></a
				>
			</li>
			<li>
				<a class="dropdown-item" href="#1"
					><strong>some value</strong> meal</a
				>
			</li>
		</ul>
	</div>
	<div class="form-feedback-group">
		<div class="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.

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

How can this be improved? Create an issue!