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.

Select Box

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

installyarn add @clayui/form
version3.104.0
  • Examples
  • Markup
  • API

Stable3.104.0View in LexiconCHANGELOGstorybook demos

  • 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

Copied!
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

Copied!
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>

How can this be improved? Create an issue!