Select

In progress

A form input used for selecting a value: when collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from.

Moon.io supports two types of selects, one whichs opens browser's native styling option list and custom "Dropdown".

With Label

Small

Medium

Large

Formatted options

Country

Hint message

Small

Informative message holder

Medium

Informative message holder

Large

Informative message holder

Error

Small

Informative message holder

Medium

Informative message holder

Large

Informative message holder

Disabled

Small

Informative message holder

Medium

Informative message holder

Large

Informative message holder

Without label

List options width

Select props

Name	Type	Required	Default	Description
formatOptionLabel	(data) => JSX.Element \| string	No	-	Function to customize the list options (like rendering an element as JSX)
hintText	JSX.Element \| string	No	_	Inform message under select
disabled	boolean	No	_	Set disabled/non-disabled select
isError	boolean	No	_	Set valid/non-valid select
label	JSX.Element \| string	No	-	Label title
menuWidth	string	No	_	Tailwind class for custom options container width
onChange	(value) => void	No	-	onChange event handler
options	{ id: number, label: string, value: string \| number }[]	Yes	-	List of options
placeholder	JSX.Element \| string	No	-	Placeholder
size	sm \| md \| lg \| xl	No	md	Size of select
value	{ id: number, label: string, value: string \| number }	No	-	Controled value