Select Box

Select Box allows users to select multiple options and if needed the ability to reorder selected options.

installyarn add @clayui/form
versionNPM Version
useimport {ClaySelectBox} from '@clayui/form';

Table of Contents

Utilities

Add the class clay-reorder-footer-end or clay-reorder-footer-center on clay-reorder to align footer content to the right or center, respectively.

Buttons on the Right

<div className="clay-reorder clay-reorder-footer-end">
	<select
		className="form-control form-control-inset"
		id="_asyupi06i"
		multiple
	>
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
	</select>
	<div className="clay-reorder-underlay form-control"></div>
	<div className="clay-reorder-footer">
		<div className="btn-group" role="group">
			<button
				className="btn btn-monospaced btn-secondary btn-sm"
				type="button"
			>
				<span className="inline-item">
					<svg
						className="lexicon-icon lexicon-icon-caret-top"
						focusable="false"
						role="presentation"
					>
						<use xlink:href="/images/icons/icons.svg#caret-top" />
					</svg>
				</span>
			</button>
			<button
				className="btn btn-monospaced btn-secondary btn-sm"
				type="button"
			>
				<span className="inline-item">
					<svg
						className="lexicon-icon lexicon-icon-caret-bottom"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#caret-bottom"
						/>
					</svg>
				</span>
			</button>
		</div>
	</div>
</div>

Buttons in the Center

<div className="clay-reorder clay-reorder-footer-center">
	<select
		className="form-control form-control-inset"
		id="_k7bny0crp"
		multiple
	>
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
	</select>
	<div className="clay-reorder-underlay form-control"></div>
	<div className="clay-reorder-footer">
		<div className="btn-group" role="group">
			<button
				className="btn btn-monospaced btn-secondary btn-sm"
				type="button"
			>
				<span className="inline-item">
					<svg
						className="lexicon-icon lexicon-icon-caret-top"
						focusable="false"
						role="presentation"
					>
						<use xlink:href="/images/icons/icons.svg#caret-top" />
					</svg>
				</span>
			</button>
			<button
				className="btn btn-monospaced btn-secondary btn-sm"
				type="button"
			>
				<span className="inline-item">
					<svg
						className="lexicon-icon lexicon-icon-caret-bottom"
						focusable="false"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#caret-bottom"
						/>
					</svg>
				</span>
			</button>
		</div>
	</div>
</div>
Edit this page on GitHub

Contributors

Table of Contents