Select
A Select or ComboBox component is a UI element that allows users to choose one or more options from a dropdown list. It typically displays a default value or prompt, and when clicked, it expands to show a list of available choices. Users can either select an option from the list or, in the case of a ComboBox, input custom values. This component is ideal for conserving space in forms and making it easy for users to make selections quickly.
# Demo
Demo Coming Soon
Select examples will be available soon.
# Usage
# Attributes
Name | Type | Default | Details |
---|---|---|---|
isMulti | boolean | false | You can pass isMulti option to switch between single / multi select. |
label | string | Optional | Label for the select field. |
placeholder | string | Optional | Placeholder text for the select. |
isLoading | boolean | false | Whether the select is in loading state. |
isCreatable | boolean | false | Whether new options can be created. |
isClearable | boolean | false | Whether the selection can be cleared. |
isSearchable | boolean | true | Whether the select is searchable. |
isDisabled | boolean | false | Whether the select is disabled. |
className | string | ' ' | You can customise by passing tailwind classes. |
labelClassName | string | ' ' | You can customise by passing tailwind classes. |
selectClassName | string | ' ' | You can customise by passing tailwind classes. |
value | OptionType | OptionType[] | null | Required | Selected value(s). |
options | OptionType[] | Required | Array of available options. |
onCreateOption | (inputValue: string) => void | Optional | Callback when new option is created. |
onChange | (value: OptionType | OptionType[] | null) => void | Optional | Callback when selection changes. |
onChangeOptions | (value: OptionType | OptionType[] | null) => void | Optional | Alternative change callback. |
getOptionLabel | (option: OptionType) => string | Optional | Function to get option label. |
getOptionValue | (option: OptionType) => string | Optional | Function to get option value. |
inputId | string | Optional | ID for the input element. |
name | string | Optional | Name attribute for the select. |
menuPortalTarget | HTMLElement | Optional | Target element for menu portal. |
# Tags