AutoComplete

The AutoComplete component is a versatile and styled input field. It offers features like theming, validation, error handling, and the capability to prepend or append icons.

Usage

Basic AutoComplete

Simple AutoComplete example

<AutoComplete placeholder="Name" suggestions={['Apple', 'Banana']} />

Variants

Using the ghost, solid, outlined variant prop.

<Flex direction="column">
  <AutoComplete block placeholder="Address" suggestions={['Apple', 'Banana']} variant="ghost" />
  <AutoComplete block placeholder="Address" suggestions={['Apple', 'Banana']} variant="solid" />
  <AutoComplete block placeholder="Address" suggestions={['Apple', 'Banana']} variant="outlined" />
</Flex>

Shadow

Using the shadow prop we can adjust shadow values for the component.

<Flex direction="column">
  <AutoComplete shadow="4" placeholder="Name" suggestions={['Apple', 'Banana']} />
</Flex>

AutoComplete with Icons

AutoComplete with prepend and append icons

<AutoComplete suggestions={['Apple', 'Banana']} placeholder="Search" iconPrepend={<Icon type="Search" />} iconAppend={<Icon type="X" />} />

Error Handling

With custom error messages

<AutoComplete suggestions={['Apple', 'Banana']} placeholder="Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" errorMessage="Enter a valid email address." />

Theming and Styling

Themed AutoComplete

<AutoComplete suggestions={['Apple', 'Banana']} placeholder="Password" color="blue" radius="full" />

API

Props

Prop	Type	Default	Required
suggestions	Array<string>	-	Yes
variant	'solid' | 'ghost' | 'outlined'	-	-
placeholder	string	-	-
iconPrepend	ReactNode	-	-
iconAppend	ReactNode	-	-
block	boolean	-	-
pattern	string	-	-
errorMessage	string	-	-
onChange	(e: ChangeEvent<HTMLInputElement>) => void	-	-
onSubmit	() => void	-	-
color	ThemeAccentColor	-	-
size	'xlarge' | 'large' | 'medium' | 'small'	'medium'	-
radius	ThemeRadius	-	-
shadow	ThemeShadow	-	-