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

PropertyDescription
ariaLabels
{ reorderUp: string; reorderDown: string; }
Labels for aria attributes

The default value is { reorderDown: 'Reorder Down', reorderUp: 'Reorder Up', }
buttonAlignment
'center' | 'end'
Aligns the buttons used to reorder items relative to the Select Box.

The default value is 'end'
items
Array<TItem>
Items to be displayed in the Select Box.
label
string
Label to be displayed above the Select Box.
multiple
boolean
Defines whether the Select Box supports selection of multiple items.
onItemsChange
(items: Array<TItem>) => void
Handler that triggers when the content of the items prop are changed caused by reordering of items.
onSelectChange
(val: Array<string>) => void
Handler that triggers when a new item is selected.
selectedIndexes
Array<number>
Selected indexes, most commonly used in combination with the Dual Listbox component
size
number
Amount of items that can fit inside the both Select Boxes before a scrollbar is introduced.
showArrows
boolean
Defines whether the component should render buttons that allow reordering of items.
value
string | Array<string>
Value of the component.
spritemap
string
Path to the spritemap that Icon should use when referencing symbols.

How can this be improved? Create an issue!