Select

yarn add @clayui/form

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

Stable3.11.1View in LexiconCHANGELOGstorybook demos

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.

Code Sample (expand to see it)

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.

Code Sample (expand to see it)

API

ClaySelect have the same React API of <select> element. Also, ClaySelect.Option has the same API of <option> React element.

SelectWithOption

PropertyTypeRequiredDefaultDescription
options
Array< ( | React.ComponentProps<typeof Select.Option> | React.ComponentProps<typeof Select.OptGroup> ) & { options?: Array<React.ComponentProps<typeof Select.Option>>; type?: 'group'; } >false[]Options of the select.

How can this be improved? Create an issue!