Autocomplete
Autocomplete provides a text input with live suggestion dropdown, supporting large and medium sizes across multiple interaction states.
'use client'; import { useState } from 'react';import { Autocomplete, Button } from 'sdaia-ui'; Installation
npx sdaia-ui@latest add autocomplete
Usage
import { Autocomplete } from "@/components/ui/autocomplete"<Autocomplete size="large" placeholder="Search..." />Examples
Default
Autocomplete input in the default placeholder state.
<Autocomplete label="Search" required placeholder="Search" value={value}Sizes
Autocomplete available in Large and Medium sizes.
<Autocomplete size="large" label="Large" ... /><Autocomplete size="medium" label="Medium" ... />Disabled
Autocomplete in the disabled state, preventing user interaction.
<Autocomplete label="Search" required placeholder="Search" value=""API Reference
AutocompleteProps
Props for the Autocomplete component.
Prop | Type | Default | Required |
|---|---|---|---|
size | 'large' | 'medium' | 'large' | optional |
value | string | '' | optional |
onChange | (value: string) => void | - | optional |
onSelect | (item: AutocompleteItem) => void | - | optional |
suggestions | AutocompleteItem[] | [] | optional |
suggestionsLabel | string | 'Suggestions' | optional |
recents | AutocompleteItem[] | [] | optional |
recentsLabel | string | 'Recents' | optional |
placeholder | string | 'Search' | optional |
label | string | - | optional |
required | boolean | false | optional |
helperText | string | - | optional |
helperIcon | boolean | true | optional |
disabled | boolean | false | optional |
leadingIcon | boolean | true | optional |
id | string | - | optional |