Autocomplete

Installation

npx @rahimstack@latest add autocomplete

Usage

• By default, Autocomplete has a type of "custom", meaning the user can enter arbitrary values not present in the options.
• The user's input is compared to the label prop of each option. The comparison is case-insensitive but space-sensitive. An option will be auto-selected while the user is typing if the comparison is successful.
• Returned arbitrary values will have a value prop of null.
  • Example: { value: null, label: "New value" }

No custom values

Change the type to "options" to disallow custom values.

<Autocomplete
    {...props}
    type="options"
/>

No filtering

Set autoFilter to false to deactive auto filtering of options.

<Autocomplete
    {...props}
    autoFilter={false}
/>

Dynamic suggestions

You can use the onTextChange prop to dynamically change the list of suggestions as the user is typing.

• isFetching will render a loading indicator if set to true.

const defaultAddress = "1600 Amphitheatre Parkway, Mountain View, CA, USA"
 
const { suggestions, fetchSuggestions, isFetching } = useGoogleMapsAutocomplete({ ...autocompleteOptions })
 
const handleTextChange = (v: string) => {
    fetchSuggestions(v)
}
 
return (
    <Autocomplete
        options={suggestions}
        defaultValue={{ value: null, label: defaultAddress }}
        onTextChange={handleTextChange}
        isFetching={isFetching}
        emptyMessage="No results"
        autoFilter={false}
        {...rest}
    />
)

Empty message

• emptyMessage will be rendered if there are no suggestions when autoFilter is true.
• If not provided, the options list will be hidden when there are no options.

<Autocomplete
    {...props}
    emptyMessage="No results"
/>

Uncontrolled

• Input type: "text", Ref prop: ref
• Unlike the controlled version, the uncontrolled version does not give access to the value prop of the selected option.
• If not required, an empty string will be submitted if the input is empty.

API Reference

const AutocompleteAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Autocomplete__root",
    ]),
    popover: cva([
        "UI-Autocomplete__popover",
        "w-[--radix-popover-trigger-width] p-0",
    ]),
    checkIcon: cva([
        "UI-Autocomplete__checkIcon",
        "h-4 w-4",
        "data-[selected=true]:opacity-100 data-[selected=false]:opacity-0",
    ]),
    container: cva([
        "UI-Autocomplete__container",
        "relative w-full",
    ]),
    command: cva([
        "UI-Autocomplete__command",
        "focus-within:ring-2 ring-[--ring] transition",
    ]),
})