AutoComplete

AutoComplete component for search functionality.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <AutoComplete
      placeholder="Type to search..."
      options={[
        { value: 'Dashboard', label: 'Dashboard' },
        { value: 'Chart', label: 'Chart' },
        { value: 'Dataset', label: 'Dataset' },
        { value: 'Database', label: 'Database' },
        { value: 'Query', label: 'Query' },
      ]}
      style={{ width: 300 }}
      filterOption
    />
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
placeholder	string	"Type to search..."	Placeholder text for AutoComplete
options	any	[{"value":"Dashboard","label":"Dashboard"},{"value":"Chart","label":"Chart"},{"value":"Dataset","label":"Dataset"},{"value":"Database","label":"Database"},{"value":"Query","label":"Query"}]	The dropdown options
style	any	{"width":300}	Custom styles for AutoComplete
filterOption	boolean	true	Enable filtering of options based on input

Import

import { AutoComplete } from '@superset-ui/core/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.