HUA Docs - The Syntax of Emotion

v1.1.0

• ↑ ↓ -
• Enter -
• Escape -


`options*`	`AutocompleteOption[]`	-	docs:components.autocomplete.props.options
`value`	`string`	-	docs:components.autocomplete.props.value
`onChange`	`(value: string, option?: AutocompleteOption) => void`	-	docs:components.autocomplete.props.onChange
`placeholder`	`string`	`"검색하거나 선택하세요"`	docs:components.autocomplete.props.placeholder
`onSearch`	`(query: string) => AutocompleteOption[] \| Promise<...>`	-	docs:components.autocomplete.props.onSearch
`filterable`	`boolean`	`true`	docs:components.autocomplete.props.filterable
`clearable`	`boolean`	`true`	docs:components.autocomplete.props.clearable
`loading`	`boolean`	`false`	docs:common.loadingState
`size`	`"sm" \| "md" \| "lg"`	`"md"`	docs:components.autocomplete.props.size
`maxHeight`	`number`	`300`	docs:components.autocomplete.props.maxHeight
`disabled`	`boolean`	`false`	Whether the autocomplete is disabled
`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/hua';
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/>

•docs:components.autocomplete.accessibility.keyboard: docs:components.autocomplete.accessibility.keyboardDesc
•docs:components.autocomplete.accessibility.aria: docs:components.autocomplete.accessibility.ariaDesc
•docs:components.autocomplete.accessibility.screenReader: docs:components.autocomplete.accessibility.screenReaderDesc

DatePicker Upload