Picker

A select is very similar to a dropdown visually but it let users select options from the panel and then represent the selection in the button.

install	yarn add @clayui/core
version	3.123.0

Beta 3.123.0 CHANGELOG

Picker

Property	Description
`active` `boolean`	Flag to indicate if the DropDown menu is active or not (controlled).
`aria-describedby` `string`	The global `aria-describedby` attribute identifies the element that describes the component.
`aria-label` `string`	The `aria-label` attribute defines a string value that labels an interactive element.
`aria-labelledby` `string`	The `aria-labelledby` attribute identifies the element (or elements) that labels the element it is applied to.
`as` `\| 'button' \| React.ForwardRefExoticComponent<any> \| ((props: React.HTMLAttributes<HTMLElement>) => JSX.Element)`	Custom trigger component. The default value is 'button'
`className` `string`	Sets the CSS className for the component.
`defaultActive` `boolean`	Property to set the default value of `active` (uncontrolled). The default value is false
`defaultSelectedKey` `React.Key`	The initial selected key (uncontrolled).
`direction` `'bottom' \| 'top'`	Direction the menu will render relative to the Picker. The default value is 'bottom'
`disabled` `boolean`	Flag to indicate that the component is disabled.
`id` `string`	The id of the component.
`messages` `{ itemSelected: string; itemDescribedby: string; }`	Texts used for assertive messages to SRs. The default value is { itemDescribedby: 'You are currently on a text element, inside of a list box.', itemSelected: '{0}, selected', }
`native` `boolean`	Flag to make the component hybrid, when identified it is on a mobile device it will use the native selector. The default value is false
`onActiveChange` `InternalDispatch<boolean>`	Callback for when the active state changes (controlled).
`onSelectionChange` `InternalDispatch<React.Key>`	Callback calling when an option is selected.
`placeholder` `string`	Text that appears when you don't have an item selected. The default value is 'Select an option'
`selectedKey` `React.Key`	The currently selected key (controlled).
`width` `number`	Sets the width of the panel.
`UNSAFE_menuClassName` `string`	Sets the className for the React.Portal Menu element.

Option

Property	Description
`aria-describedby` `string`	The global aria-describedby attribute identifies the element (or elements) that describes the element on which the attribute is set.
`aria-label` `string`	The `aria-label` attribute defines a string value that labels an interactive element.
`aria-labelledby` `string`	The `aria-labelledby` attribute identifies the element (or elements) that labels the element it is applied to.
`aria-posinset` `number`	Sets the number or position in the current set of listitems or treeitems when not all items are present in the DOM.
`aria-setsize` `number`	Sets the number of items in the current set of listitems or treeitems when not all items in the set are present in the DOM.
`children` `React.ReactNode`	The contents of the component.
`disabled` `boolean`	Flag that indicates if option is disabled.
`href` `string`	Path or URL
`textValue` `string`	Sets a text value if the component's content is not plain text. This value is used in the combobox element to show the selected option.