Skip to main content
Version: Next

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​

PropTypeDefaultDescription
placeholderstring"Type to search..."Placeholder text for AutoComplete
optionsany[{"value":"Dashboard","label":"Dashboard"},{"value":"Chart","label":"Chart"},{"value":"Dataset","label":"Dataset"},{"value":"Database","label":"Database"},{"value":"Query","label":"Query"}]The dropdown options
styleany{"width":300}Custom styles for AutoComplete
filterOptionbooleantrueEnable filtering of options based on input

Import​

import { AutoComplete } from '@superset/components';
Improve this page

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