Autocomplete

import { Autocomplete } from '@bedrock-ui/core';

By default the Autocomplete component is very bare-bones. By having access to the individual Autocomplete options, it is easy to implement whatever filtering you want based on the inputValue prop. Since the Autocomplete children are passed directly through, it is also very easy to render custom option behavior like loading/async or grouping.

Default

<Autocomplete>
  <Autocomplete.Option>Lorem ipsum</Autocomplete.Option>
  <Autocomplete.Option>dolor sit amet</Autocomplete.Option>
  <Autocomplete.Option>consectetur adipiscing elit</Autocomplete.Option>
</Autocomplete>

Custom Grouping

const STATE_OPTIONS = {
  CO: ['Boulder', 'Denver'],
  NJ: ['Atlantic City', 'Jersey City', 'Trenton'],
  VA: ['Arlington', 'Richmond', 'Virginia Beach'],
};

<Autocomplete>
  {Object.keys(STATE_OPTIONS).map((state, index) => (
    <Flex flexDirection="column" key={index}>
      <Flex p={2}>
        <Text>{state}</Text>
      </Flex>

      {STATE_OPTIONS[state as keyof typeof STATE_OPTIONS].map((option, optionIndex) => (
        <Autocomplete.Option key={`${index}-${optionIndex}`}>
          <Flex px={2}>{option}</Flex>
        </Autocomplete.Option>
      ))}
    </Flex>
  ))}
</Autocomplete>

Error

<Autocomplete error>
  <Autocomplete.Option>Lorem ipsum</Autocomplete.Option>
  <Autocomplete.Option>dolor sit amet</Autocomplete.Option>
  <Autocomplete.Option>consectetur adipiscing elit</Autocomplete.Option>
</Autocomplete>

Success

<Autocomplete success>
  <Autocomplete.Option>Lorem ipsum</Autocomplete.Option>
  <Autocomplete.Option>dolor sit amet</Autocomplete.Option>
  <Autocomplete.Option>consectetur adipiscing elit</Autocomplete.Option>
</Autocomplete>