Arctic Design
Get StartedFoundationsComponentsExamples
K

Autocomplete

Enhances input fields by suggesting possible completions as users type, streamlining data entry and improving accuracy.

Usage
Size
Required
Disabled
Read Only
import { Autocomplete } from '@arctic-kit/snow';
function Demo() {
return (
<Autocomplete
size="medium" label="Fruit name" placeholder="Enter fruit name"
options={[
'Alfalfa Sprouts',
'Apple',
'Apricot',
'Artichoke',
'Asian Pear',
'Asparagus',
'Atemoya',
'Avocado',
'Bamboo Shoots',
'Banana',
'Bean Sprouts',
'Beans',
'Beets',
'Belgian Endive',
'Bell Peppers',
'Bitter Melon',
'Blackberries',
'Blueberries',
]}
/>
);
}

API Reference

PropsTypeDefault
classNamestring | undefined---
containerClassNamestring | undefined---
containerStyleCSSProperties | undefined---
disabledboolean | undefined---
errorTextstring | undefined---
labelstring | undefined---
maxLengthnumber | undefined---
onBlur(((event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) => void) & ((event: ChangeEvent<HTMLInputElement>) => void)) | undefined---
onChange((value: string) => void) | undefined---
optionsreadonly (string | OptionType)[][]
placeholderstring | undefinedType to search
prefixReactNode---
prefixPropsHTMLAttributes<"div"> | undefined---
readOnlyboolean | undefined---
requiredboolean | undefined---
size"small" | "medium" | "large"---
styleCSSProperties | undefined---
suffixReactNode---
suffixPropsHTMLAttributes<"div"> | undefined---
typeHTMLInputTypeAttribute | undefined---
valuestring | undefined---