Select Box

yarn add @clayui/form

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

Utilities
- Buttons on the Right
- Buttons in the Center

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

Code Sample (expand to see it)

<div class="clay-reorder clay-reorder-footer-end">
	<select class="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 class="clay-reorder-underlay form-control"></div>
	<div class="clay-reorder-footer">
		<div class="btn-group" role="group">
			<button
				class="btn btn-monospaced btn-secondary btn-sm"
				type="button"
			>
				<span class="inline-item">
					<svg
						class="lexicon-icon lexicon-icon-caret-top"
						focusable="false"
						role="presentation"
					>
						<use xlink:href="/images/icons/icons.svg#caret-top" />
					</svg>
				</span>
			</button>
			<button
				class="btn btn-monospaced btn-secondary btn-sm"
				type="button"
			>
				<span class="inline-item">
					<svg
						class="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

Code Sample (expand to see it)

<div class="clay-reorder clay-reorder-footer-center">
	<select class="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 class="clay-reorder-underlay form-control"></div>
	<div class="clay-reorder-footer">
		<div class="btn-group" role="group">
			<button
				class="btn btn-monospaced btn-secondary btn-sm"
				type="button"
			>
				<span class="inline-item">
					<svg
						class="lexicon-icon lexicon-icon-caret-top"
						focusable="false"
						role="presentation"
					>
						<use xlink:href="/images/icons/icons.svg#caret-top" />
					</svg>
				</span>
			</button>
			<button
				class="btn btn-monospaced btn-secondary btn-sm"
				type="button"
			>
				<span class="inline-item">
					<svg
						class="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>