Select component

How to use

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

OR

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 | | |