Dual List Box

Dual List Box provides users with two Select Boxes with the ability to move items between lists.

install	yarn add @clayui/form
version
use	`import {ClayCheckbox} from '@clayui/form';`

Table of Contents

Don’t forget to check WAI-ARIA accessibility pratices for Form Elements when writting your markup.

In Use

Available

<div className="form-group">
	<div className="clay-dual-listbox">
		<div className="clay-dual-listbox-item clay-dual-listbox-item-expand">
			<label for="_9d5cxj5xm">
				<span className="text-truncate-inline">
					<span className="text-truncate">In Use</span>
				</span>
			</label>
			<div className="clay-reorder clay-reorder-footer-end">
				<select
					className="form-control form-control-inset"
					id="_9d5cxj5xm"
					multiple
					size="7"
				>
					<option value="twitter">Twitter</option>
					<option value="linkedin">Linkedin</option>
					<option value="facebook">Facebook</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>
		</div>
		<div className="clay-dual-listbox-item clay-dual-listbox-actions">
			<div className="btn-group-vertical">
				<button
					className="btn btn-monospaced btn-secondary btn-sm"
					type="button"
				>
					<span className="inline-item">
						<svg
							className="lexicon-icon lexicon-icon-caret-right"
							focusable="false"
							role="presentation"
						>
							<use
								xlink:href="/images/icons/icons.svg#caret-right"
							/>
						</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-left"
							focusable="false"
							role="presentation"
						>
							<use
								xlink:href="/images/icons/icons.svg#caret-left"
							/>
						</svg>
					</span>
				</button>
			</div>
		</div>
		<div className="clay-dual-listbox-item clay-dual-listbox-item-expand">
			<label for="_957gwvjvl">
				<span className="text-truncate-inline">
					<span className="text-truncate">Available</span>
				</span>
			</label>
			<div className="clay-reorder">
				<select
					className="form-control form-control-inset"
					id="_957gwvjvl"
					multiple
					size="7"
				>
					<option value="addthis">AddThis</option>
					<option value="delicious">Delicious</option>
					<option value="digg">Digg</option>
					<option value="evernote">Evernote</option>
				</select>
				<div className="clay-reorder-underlay form-control"></div>
			</div>
		</div>
	</div>
</div>

Edit this page on GitHub

Contributors

Table of Contents