Select

View in Lexicon

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

Contributors

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

Last edited January 29, 2025 at 7:35:02 AM

Table of Contents