Select Box

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';`

Table of Contents

Introduction
API Reference

Introduction

Select Box is exported from the @clayui/form package, consisting of some low-level utilities that provides the ability to create a Select element with multiple options selectable.

Note: The actual select functionality will not work here due to a pending issue at FormidableLabs/react-live#196. To see it in action, check out the storybook demo.

Open Sandbox

import {Provider} from '@clayui/core';
import {ClaySelectBox} from '@clayui/form';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [items, setItems] = useState([
		{
			label: 'Reddit',
			value: 'reddit',
		},
		{
			label: 'Slack',
			value: 'slack',
		},
		{
			label: 'Twitter',
			value: 'twitter',
		},
	]);
	const [value, setValue] = useState([]);

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<ClaySelectBox
					items={items}
					label="In Use"
					multiple
					onItemsChange={setItems}
					onSelectChange={setValue}
					value={value}
				/>
			</div>
		</Provider>
	);
}

API Reference

getSelectedIndexes

(items: Array<TItem>, selectedValues: Array<number | string>) => Array<number>

Parameters

items *

Array<TItem>

selectedValues *

Array<string | number>

Returns

number[]

SelectBox

({ ariaLabels, buttonAlignment, className, disabled, id, items, label, multiple, onItemsChange, onSelectChange, showArrows, size, spritemap, value, ...otherProps }: IProps) => JSX.Element

Parameters

Properties

ariaLabels

{ reorderUp: string; reorderDown: string; } | undefined= {"reorderDown":"Reorder Down","reorderUp":"Reorder Up"}

Labels for aria attributes

buttonAlignment

"center" | "end" | undefined= "end"

Aligns the buttons used to reorder items relative to the Select Box.

disabled

boolean | undefined

Disables the component.

items *

Array<TItem>

Items to be displayed in the Select Box.

label

string | undefined

Label to be displayed above the Select Box.

multiple

boolean | undefined

Defines whether the Select Box supports selection of multiple items.

onItemsChange

((items: Array<TItem>) => void) | undefined

Handler that triggers when the content of the items prop are changed caused by reordering of items.

onSelectChange *

(value: Array<string>) => void

Handler that triggers when a new item is selected.

value *

Array<string>

selectedIndexes

Array<number> | undefined

Selected indexes, most commonly used in combination with the Dual Listbox component

size

number | undefined

Amount of items that can fit inside the both Select Boxes before a scrollbar is introduced.

showArrows

boolean | undefined

Defines whether the component should render buttons that allow reordering of items.

value *

string | Array<string>

Value of the component.

spritemap

string | undefined

Path to the spritemap that Icon should use when referencing symbols.

Returns

Element

Edit this page on GitHub

Contributors

Matuzalém Teles, Krešimir Čoko, Bryce Osterhaus

Last edited May 11, 2025 at 5:57:01 PM

Table of Contents

Introduction
API Reference