Autocomplete

Components

Autocomplete

Code

The Autocomplete component filters options as the user types and completes the input on selection, offering a flexible and efficient way to handle large or dynamic datasets.

The Autocomplete component supports both controlled and uncontrolled usage, with customization options for rendering, filtering logic, and result presentation. Built for flexibility, it can be used on its own or composed with other input and menu primitives to support complex interaction patterns.

Autocomplete is part of the greater Menu ecosystem.Learn more

import { Autocomplete } from '@sproutsocial/racine'

() => {
	return (
		<Box display="flex" justifyContent="center" alignItems="center" height="100%">
			<Autocomplete
        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
        menuToggleElement={
					<FormField 
						label={
							<MenuLabel htmlFor="my-combobox">
              	Choose a book
            	</MenuLabel>
						}
						helperText='Begin typing and select an option to complete.'
					>
						{props => <AutocompleteInput {...props} />}
					</FormField>
        }
      >
        <MenuContent>
          {TEST_BOOKS.map(({ id, title }) => (
            <MenuItem key={id} id={id}>
              {title}
            </MenuItem>
          ))}
        </MenuContent>
      </Autocomplete>
		</Box>
	)
}

Properties

Recipes

Autocomplete with TokenInput

import { Autocomplete } from '@sproutsocial/racine'

() => {
	  const items = TEST_BOOKS.map((book) => ({
      id: book.id,
      children: book.title,
			inputType: "checkbox"
    }));

    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 htmlFor="my-combobox">
              	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>
    );
}