Select Box

yarn add @clayui/form

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

React Component
CSS / Markup

Introduction
API

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.

In Use

import ClayButton, {ClayButtonWithIcon} from '@clayui/button';
import classNames from 'classnames';

import ClayButton, {ClayButtonWithIcon} from '@clayui/button';
import classNames from 'classnames';

const Component = () => {
  const selectBoxItems = [
    {
      label: "Reddit",
      value: "reddit"
    },
    {
      label: "Slack",
      value: "slack"
    },
    {
      label: "Twitter",
      value: "twitter"
    }
  ];

  const [items, setItems] = useState(selectBoxItems);
  const [value, setValue] = useState([]);

  return (
    <ClaySelectBox
      items={items}
      label="In Use"
      multiple
      onItemsChange={setItems}
      onSelectChange={setValue}
      spritemap={spritemap}
      value={value}
    />
  );
};

render(<Component />);

const Component = () => {
  const selectBoxItems = [
    {
      label: "Reddit",
      value: "reddit"
    },
    {
      label: "Slack",
      value: "slack"
    },
    {
      label: "Twitter",
      value: "twitter"
    }
  ];
  const [items, setItems] = useState(selectBoxItems);
  const [value, setValue] = useState([]);
  return (
    <ClaySelectBox
      items={items}
      label="In Use"
      multiple
      onItemsChange={setItems}
      onSelectChange={setValue}
      spritemap={spritemap}
      value={value}
    />
  );
};
render(<Component />);

API

Property	Type	Required	Default	Description
ariaLabels	{ reorderUp: string; reorderDown: string; }	false	{ reorderDown: 'Reorder Down', reorderUp: 'Reorder Up', }	Labels for aria attributes
buttonAlignment	'center' \| 'end'	false	'end'	Aligns the buttons used to reorder items relative to the Select Box.
items	Array<TItem>	true		Items to be displayed in the Select Box.
label	string	false		Label to be displayed above the Select Box.
multiple	boolean	false		Defines whether the Select Box supports selection of multiple items.
onItemsChange	(items: Array<TItem>) => void	false		Handler that triggers when the content of the items prop are changed caused by reordering of items.
onSelectChange	(val: Array<string>) => void	true		Handler that triggers when a new item is selected.
selectedIndexes	Array<number>	false		Selected indexes, most commonly used in combination with the Dual Listbox component
size	number	false		Amount of items that can fit inside the both Select Boxes before a scrollbar is introduced.
showArrows	boolean	false		Defines whether the component should render buttons that allow reordering of items.
value	string \| Array<string>	true		Value of the component.
spritemap	string	false		Path to the spritemap that Icon should use when referencing symbols.

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

<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

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