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. supports two types of selects, one whichs opens browser's native styling option list and custom "Dropdown".


With Label

Formatted options

Hint message



Without label

List options width

Select props

formatOptionLabel(data) => JSX.Element | stringNo-Function to customize the list options (like rendering an element as JSX)
hintTextJSX.Element | stringNo_Inform message under select
disabledbooleanNo_Set disabled/non-disabled select
isErrorbooleanNo_Set valid/non-valid select
labelJSX.Element | stringNo-Label title
menuWidthstringNo_Tailwind class for custom options container width
onChange(value) => voidNo-onChange event handler
options{ id: number, label: string, value: string | number }[]Yes-List of options
placeholderJSX.Element | stringNo-Placeholder
sizesm | md | lg | xlNomdSize of select
value{ id: number, label: string, value: string | number }No-Controled value