Recipes

Autocomplete with TokenInput

View Autocomplete with TokenInput in Storybook

Live Editor

function AutocompleteTokenInputExample() {
  return (
    <Box display="flex" justifyContent="center" alignItems="center" height="100%" width="100%">
      <Autocomplete
        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
        menuToggleElement={
          <FormField
            width="50%"
            label={
              <MenuLabel>
                Choose a book
              </MenuLabel>
            }
            helperText='Select options'
          >
            {props => <AutocompleteTokenInput {...props} />}
          </FormField>
        }
        onStateChange={(changes) => changes}
        multiSelect
      >
        <MenuContent>
          {TEST_BOOKS.map(({ id, title }) => (
            <MenuItem key={id} id={id}>
              {title}
            </MenuItem>
          ))}
        </MenuContent>
      </Autocomplete>
    </Box>
  );
}