Sanity UI
Docs
Arcade
  1. Docs
  2. Components
  3. Autocomplete

<Autocomplete />

The <Autocomplete /> component is typically used for search components. It consists of a text input for writing a query, and properties for rendering suggestions.

Properties  

border?: boolean
filterOption?: (query: string, option: Option) => boolean
fontSize?: number | number[]
icon?: React.ComponentType | React.ReactNode
id: string
loading?: boolean
onChange?: (value: string) => void
onQueryChange?: (query: string | null) => void
onSelect?: (value: string) => void
options: {value: string}[]
The options to render.
padding?: number | number[]
placeholder?: string
prefix?: React.ReactNode
radius?: number | number[]
renderOption: (option: {value: string}) => React.ReactNode
The callback function for rendering each option.
renderValue?: (value: string, option?: Option) => string
suffix?: React.ReactNode
value?: string
The current value.

Example with custom rendering  

Made withby folks at