# Component/DropdownInput

Input 박스를 눌러 텍스트를 입력할 수 있으며 입력을 시작하면 일치하는 항목이 실시간으로 표시됩니다.
또한 화살표를 눌러 모든 항목을 보고 선택할 수도 있습니다.

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `allowCustomValue` | `boolean | undefined` | No |  | options에 없는 값을 허용할 지 여부입니다. |
| `startElement` | `ReactNode | ReactElement<IconProps, string | JSXElementConstructor<any>>` | No |  |  |
| `endElement` | `ReactNode | ReactElement<IconProps, string | JSXElementConstructor<any>>` | No |  |  |
| `onSearch` | `((inputValue: string) => void) | undefined` | No |  | 입력된 검색결과를 전달합니다. |
| `onChange` | `((value: OptionValue | undefined) => void) | undefined` | No |  |  |
| `onKeyDown` | `((event: KeyboardEvent<Element>) => void) | undefined` | No |  |  |
| `options` | `DropdownInputOption<OptionValue>[]` | Yes |  |  |
| `keyExtractor` | `((item: DropdownInputOption<OptionValue>, index: number) => string | number) | undefined` | No |  |  |
| `optionFilter` | `((inputValue: string, item: DropdownInputOption<OptionValue>, index: number) => boolean) | undefined` | No |  |  |
| `size` | `undefined "xsmall" "small" "medium" "large"` | No | 'medium' |  |
| `width` | `CSSValueWithLength | undefined` | No |  |  |
| `disabled` | `boolean | undefined` | No |  |  |
| `value` | `string | number | undefined` | No |  |  |
| `status` | `undefined "error"` | No |  |  |
| `zIndex` | `number | undefined` | No | getZIndex('dropdown') |  |
| `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무  - 자동 위치 상/하만 적용됩니다. |
| `placeholder` | `string | undefined` | No |  |  |
| `optionItemHeight` | `number | undefined` | No |  |  |
| `enableVirtualScroll` | `boolean | undefined` | No |  |  |
| `unstableFocusVisible` | `boolean | undefined` | No |  | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |
| `ref` | `Ref<HTMLInputElement> | undefined` | No |  |  |