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

Edit this page on GitHub

Table of Contents

Introduction
API Reference