Select
View in LexiconA 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'; |
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.
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.
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>
);
}
Table of Contents