npm package: @getfly-ui/select
Description: Select for getfly UI
Latest version: 0.0.2

# Select component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Fselect?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Fselect?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Fselect?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Fselect?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Fselect?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Fselect?style=for-the-badge)

## How to use

```ts
import { Select } from '@getfly-ui/select';
```

OR

```ts
import { Select } from 'getfly-ui';
```

# Props

## Select

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `aria-errormessage` | `string or undefined` |  | HTML ID of an element containing an error message related to the input* |
| `aria-invalid` | `boolean or "false" or "true" or "grammar" or "spelling" or undefined` |  | Indicate if the value entered in the field is invalid * |
| `aria-label` | `string or undefined` |  | Aria label (for assistive tech) |
| `aria-labelledby` | `string or undefined` |  | HTML ID of an element that should be used as the label (for assistive tech) |
| `aria-live` | `enum` |  | Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive |
| `autoFocus` | `boolean or undefined` |  |  |
| `blurInputOnSelect` | `boolean or undefined` | `false` |  |
| `captureMenuScroll` | `boolean or undefined` | `true` |  |
| `className` | `string or undefined` |  |  |
| `closeMenuOnSelect` | `boolean or undefined` | `true` |  |
| `closeMenuOnScroll` | `boolean or ((event: Event) => boolean) or undefined` | `false` |  |
| `escapeClearsValue` | `boolean or undefined` | `false` |  |
| `filterOption` | `((option: FilterOptionOption<Option>, inputValue: string) => boolean) or null or undefined` | `createFilter()` |  |
| `formatGroupLabel` | `((group: Group) => ReactNode) or undefined` | `<Option, Group extends GroupBase<Option>>(group: Group): string =>
  group.label as string` |  |
| `formatOptionLabel` | `((data: Option, formatOptionLabelMeta: FormatOptionLabelMeta<Option>) => ReactNode) or undefined` |  |  |
| `getOptionLabel` | `GetOptionLabel<Option> or undefined` | `<Option>(option: Option): string =>
  (option as { label?: unknown }).label as string` |  |
| `getOptionValue` | `GetOptionValue<Option> or undefined` | `<Option>(option: Option): string =>
  (option as { value?: unknown }).value as string` |  |
| `hideSelectedOptions` | `boolean or undefined` |  |  |
| `inputValue` | `string` |  |  |
| `instanceId` | `string or number or undefined` |  |  |
| `isClearable` | `boolean or undefined` |  |  |
| `isDisabled` | `boolean or undefined` | `false` |  |
| `isLoading` | `boolean or undefined` | `false` |  |
| `isOptionDisabled` | `((option: Option, selectValue: Options<Option>) => boolean) or undefined` | `<Option>(option: Option): boolean =>
  !!(option as { isDisabled?: unknown }).isDisabled` |  |
| `isOptionSelected` | `((option: Option, selectValue: Options<Option>) => boolean) or undefined` |  |  |
| `isMulti` | `boolean or undefined` | `false as IsMulti` |  |
| `isSearchable` | `boolean or undefined` | `true` |  |
| `minMenuHeight` | `number or undefined` | `140` |  |
| `maxMenuHeight` | `number or undefined` | `300` |  |
| `menuIsOpen` | `boolean` |  |  |
| `menuPlacement` | `enum` | `bottom` |  |
| `menuPosition` | `enum` | `absolute` |  |
| `menuPortalTarget` | `HTMLElement or undefined` |  |  |
| `menuShouldBlockScroll` | `boolean or undefined` | `false` |  |
| `menuShouldScrollIntoView` | `boolean or undefined` | `!isMobileDevice()` |  |
| `loadingMessage` | `((obj: { inputValue: string; }) => ReactNode) or undefined` | `() => 'Đang tải dữ liệu...'` |  |
| `noOptionsMessage` | `((obj: { inputValue: string; }) => ReactNode) or undefined` | `() => 'Chưa có dữ liệu'` |  |
| `multiGroupMessage` | `((obj: { selectedCount: number; }) => ReactNode) or undefined` | `({ selectedCount }) => `Đã chọn ${selectedCount}`` |  |
| `onBlur` | `FocusEventHandler<HTMLInputElement> or undefined` |  |  |
| `onChange` | `(newValue: OnChangeValue<Option, IsMulti>) => void` |  | Handle change events on the select |
| `onFocus` | `FocusEventHandler<HTMLInputElement> or undefined` |  | Handle focus events on the control |
| `onInputChange` | `((newValue: string) => void) or undefined` |  | Handle change events on the input |
| `onKeyDown` | `KeyboardEventHandler<HTMLDivElement> or undefined` |  |  |
| `onMenuOpen` | `() => void` |  |  |
| `onMenuClose` | `() => void` |  |  |
| `onMenuScrollToTop` | `((event: WheelEvent or TouchEvent) => void) or undefined` |  |  |
| `onMenuScrollToBottom` | `((event: WheelEvent or TouchEvent) => void) or undefined` |  |  |
| `openMenuOnFocus` | `boolean or undefined` | `false` |  |
| `openMenuOnClick` | `boolean or undefined` | `true` |  |
| `options` | `OptionsOrGroups<Option, Group> or undefined` | `[]` |  |
| `pageSize` | `number or undefined` | `5` |  |
| `placeholder` | `ReactNode` | `Select...` |  |
| `value` | `PropsValue<Option>` |  |  |
| `required` | `boolean or undefined` |  |  |
| `isError` | `boolean or undefined` |  |  |
| `showAllSelected` | `boolean or undefined` | `false` |  |
| `maxShowValue` | `number or undefined` | `2` |  |
| `ref` | `Ref<any> or undefined` |  |  |