Auto Complete

Auto Complete is a searchable dropdown component that filters options as users type. It supports creating new options, grouped items, and custom rendering.

Prop	Type	Default value	Description
Prop value	Type string	Default value ""	Description Current input value of the autocomplete field
Prop onSelect	Type (value: string) => void	Default value undefined	Description Callback function called when an option is selected. Receives the selected value.
Prop placeholder	Type string	Default value undefined	Description Placeholder text displayed when the field is empty
Prop options	Type Array<AutoCompleteOptionListItem>	Default value []	Description Array of autocomplete option objects, each with label and value properties
Prop label	Type ReactNode	Default value undefined	Description Label text or content displayed above or beside the autocomplete field
Prop error	Type ReactNode	Default value undefined	Description Error message or content displayed when validation fails
Prop disabled	Type boolean	Default value false	Description Whether the autocomplete is disabled and cannot be interacted with
Prop allowCreateOption	Type boolean	Default value false	Description Whether users can create new options by typing values not in the options list
Prop onOpenChange	Type (open: boolean) => void	Default value undefined	Description Callback function called when the dropdown open state changes. Receives the new open state.

Quick Start

import { AutoComplete } from '@clickhouse/click-ui'
import { useState } from 'react'

function MyAutoComplete() {
const [value, setValue] = useState('')
return (
  <AutoComplete
    value={value}
    onSelect={setValue}
    placeholder="Search options..."
    options={[
      { label: 'Option 1', value: 'option1' },
      { label: 'Option 2', value: 'option2' },
    ]}
  />
)
}

Select: For dropdown selection without search functionality.
TextField: For basic text input without autocomplete.
SearchField: For search inputs with icon.
Dropdown: For dropdown menus without autocomplete.

Common Use Cases

Basic Autocomplete

import { AutoComplete } from '@clickhouse/click-ui'
import { useState } from 'react'

function BasicAutoComplete() {
const [value, setValue] = useState('')
return (
  <AutoComplete
    value={value}
    onSelect={setValue}
    placeholder='Search options...'
    options={[
      { label: 'Apple', value: 'apple' },
      { label: 'Banana', value: 'banana' },
    ]}
  />
)
}

Using with Children

You can also use AutoComplete with children for more control:

Prop	Type	Default value	Description
Prop AutoComplete.Item	Type Individual option item	Default value
Prop AutoComplete.Group	Type Group of options with a heading	Default value

Variants

With Groups

With Create Option

import { AutoComplete } from '@clickhouse/click-ui'
import { useState } from 'react'

function CreateOptionAutoComplete() {
const [value, setValue] = useState('')
return (
  <AutoComplete
    value={value}
    onSelect={setValue}
    placeholder='Type to search or create...'
    allowCreateOption
    options={[
      { label: 'Existing Option 1', value: 'opt1' },
      { label: 'Existing Option 2', value: 'opt2' },
    ]}
  />
)
}

Select Date Picker