Select Box allows users to select multiple options and if needed the ability to reorder selected options.
| install | yarn add @clayui/form |
|---|
| version |  |
|---|
| use | import {ClaySelectBox} from '@clayui/form'; |
|---|
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="/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="/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="/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="/icons.svg#caret-bottom" />
</svg>
</span>
</button>
</div>
</div>
</div>Edit this page on GitHubContributors
Matuzalém Teles
Last edited May 12, 2025 at 7:56:02 PM