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