Autocomplete

@hua-labs/ui

v1.1.0

필터링, 키보드 탐색, 비동기 검색, 아이콘 커스텀 옵션을 지원하는 자동완성 입력 컴포넌트입니다.

라이브 데모

기본 자동완성

아이콘과 함께

크기

키보드 단축키

• ↑ ↓ - 옵션 탐색
• Enter - 선택
• Escape - 닫기

Props

이름	타입	기본값	설명
`options*`	`AutocompleteOption[]`	-	{ value, label, description?, icon? } 배열
`value`	`string`	-	선택된 값
`onChange`	`(value: string, option?: AutocompleteOption) => void`	-	값 변경 핸들러
`placeholder`	`string`	`"검색하거나 선택하세요"`	플레이스홀더 텍스트
`onSearch`	`(query: string) => AutocompleteOption[] \| Promise<...>`	-	커스텀 검색 핸들러 (비동기 지원)
`filterable`	`boolean`	`true`	클라이언트 측 필터링 활성화
`clearable`	`boolean`	`true`	지우기 버튼 표시
`loading`	`boolean`	`false`	로딩 상태
`size`	`"sm" \| "md" \| "lg"`	`"md"`	입력 크기
`maxHeight`	`number`	`300`	드롭다운 최대 높이 (px)
`disabled`	`boolean`	`false`	비활성화 상태
`error`	`boolean`	`false`	Whether to show error state
`emptyText`	`string`	-	Text to display when no options match

코드 예시

docs:common.basicUsagetsx

1import { Autocomplete } from '@hua-labs/ui/form';
2 
3const options = [
4  { value: "react", label: "React", description: "JavaScript library" },
5  { value: "vue", label: "Vue.js", description: "Progressive framework" },
6];
7 
8<Autocomplete
9  options={options}
10  value={value}
11  onChange={(val) => setValue(val)}
12  placeholder="Select a framework..."
13/>

docs:common.withIconstsx

1const userOptions = [
2  { value: "1", label: "Kim Minji", icon: <User /> },
3  { value: "2", label: "Park Jihoon", icon: <User /> },
4];
5 
6<Autocomplete
7  options={userOptions}
8  onChange={handleChange}
9/>

docs:components.autocomplete.examples.asynctsx

1<Autocomplete
2  options={[]}
3  onSearch={async (query) => {
4    const response = await fetch(`/api/search?q=${query}`);
5    return response.json();
6  }}
7  loading={isLoading}
8/>

접근성

•키보드 탐색: 방향키, Enter, Escape 지원
•ARIA: aria-autocomplete, aria-expanded, aria-controls
•스크린 리더: 올바른 role='listbox'와 role='option'

DatePicker Upload