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

Table of Contents

Introduction
API Reference