Select

A form control element used to select from several provided options and enter data.

installyarn add @clayui/form
versionNPM Version
useimport {ClaySelect, ClaySelectWithOption} from '@clayui/form';

Table of Contents

Introduction

ClaySelect and ClaySelect.Option are <select> and <option> elements respectivetly that are styled using ClayCSS classes.

ClaySelect represents a control that provides a menu of options (ClaySelect.Option). ClaySelect.Option defines an option in a select list.

Use ClaySelect.Option for wrapping an option item.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import {ClaySelect} from '@clayui/form';
import React, {useState} from 'react';

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

export default function App() {
	const options = [
		{
			label: 'Option 1',
			value: '1',
		},
		{
			label: 'Option 2',
			value: '2',
		},
	];

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<ClaySelect aria-label="Select Label" id="mySelectId">
					{options.map((item) => (
						<ClaySelect.Option
							key={item.value}
							label={item.label}
							value={item.value}
						/>
					))}
				</ClaySelect>
			</div>
		</Provider>
	);
}

SelectWithOption

If you use ClaySelect only for simple cases that do not need props for options, you can use <ClaySelectWithOption /> which will have the same result as the previous version.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import {ClaySelectWithOption} from '@clayui/form';
import React, {useState} from 'react';

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

export default function App() {
	const options = [
		{
			label: 'Option 1',
			value: '1',
		},
		{
			label: 'Option 2',
			value: '2',
		},
	];

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<ClaySelectWithOption
					aria-label="Select Label"
					id="mySelectId"
					options={options}
				/>
			</div>
		</Provider>
	);
}

API Reference

OptGroup

({ children, ...otherProps }: React.OptgroupHTMLAttributes<HTMLOptGroupElement>) => JSX.Element
Returns
Element

Option

({ label, ...otherProps }: React.OptionHTMLAttributes<HTMLOptionElement>) => JSX.Element
Returns
Element

Select

typeof Select
Parameters
Properties

shrink

boolean | undefined

Flag to make the Select component only as wide as its contents.

sizing

"sm" | "lg" | undefined

Set the proportional size of the Select component.

Returns
Element

ClaySelectWithOption

({ options, ...otherProps }: IProps) => JSX.Element
Parameters
Properties

options

Array<(React.OptgroupHTMLAttributes<HTMLOptGroupElement> | React.OptionHTMLAttributes<HTMLOptionElement>) & { options?: Array<React.ComponentProps<typeof Select.Option>>; type?: "group"; }>= []

Options of the select.

shrink

boolean | undefined

Flag to make the Select component only as wide as its contents.

sizing

"sm" | "lg" | undefined

Set the proportional size of the Select component.

Returns
Element
Edit this page on GitHub

Table of Contents