A form control element used to select from several provided options and enter data.
install yarn add @clayui/form version use import {ClaySelect , ClaySelectWithOption } from '@clayui/form' ;
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.
import {Provider } from '@clayui/core' ;
import {ClaySelect } from '@clayui/form' ;
import React from 'react' ;
export default function App () {
const options = [
{
label : 'Option 1' ,
value : '1' ,
},
{
label : 'Option 2' ,
value : '2' ,
},
];
return (
<Provider spritemap = "/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 >
);
}Show code SelectWithOption
If you use ClaySelect only for simple cases that do not need props for options<ClaySelectWithOption /> which will have the same result as the previous version.
import {Provider } from '@clayui/core' ;
import {ClaySelectWithOption } from '@clayui/form' ;
import React from 'react' ;
export default function App () {
const options = [
{
label : 'Option 1' ,
value : '1' ,
},
{
label : 'Option 2' ,
value : '2' ,
},
];
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<ClaySelectWithOption
aria-label = "Select Label"
id = "mySelectId"
options = {options }
/>
</div >
</Provider >
);
}Show code API Reference
OptGroup ({ children , ... otherProps }: React .OptgroupHTMLAttributes <HTMLOptGroupElement >) => JSX .Element
Option ({ label , ... otherProps }: React .OptionHTMLAttributes <HTMLOptionElement >) => JSX .Element Parameters Properties shrink boolean | undefined
Flag to make the Select component only as wide as its contents.
sizing "lg" | "sm" | 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 "lg" | "sm" | undefined
Set the proportional size of the Select component.
Returns ElementEdit this page on GitHub Contributors
Matuzalém Teles, Diego Nascimento, Bryce Osterhaus, Krešimir Čoko
Last edited May 11, 2025 at 5:57:01 PM
