Skip to main contentSkip to site searchSkip to component search
Honeycomb

legacy-autocomplete-input

Deprecated

Deprecated since v12.0.0.

Props

Prop nameTypeDefaultDescription
idstringRequired

Id for this input, also used to bind it to the label and validation messages.

extraClassesstring | undefined

Injection in className.

validboolean | undefined

Enables valid state or error state, depending on the value. If absent no validation is presented.

loadingboolean | undefined

Enables loading state. When present, overrides any visual feedback from the valid state.

type"number" | "search" | "text" | "tel" | "url" | "email" | "date" | "time" | "datetime-local" | "month" | "password" | "week" | undefined

Choose a different input type according to what you expect from the user. Some input types have honeycomb flavored decorations.

infoReactNode

Provides extra information for this input field.

infoErrorReactNode

Provides the error message when valid state is `false`.

iconLeftHCIconComponent | ButtonComp | undefined

Icon rendered to the left of the input field. Can be either one of the following components: Icon Button

since v. 5.0.0
iconRightHCIconComponent | ButtonComp | undefined

Icon rendered to the right of the input field. Can be either one of the following components: Icon Button

since v. 5.0.0
controllers[ButtonComp, ButtonComp] | undefined

Input controllers rendered to the right of the input field. Accepts an array of exactly two buttons. Button

since v. 9.5.0
inlineLabelLeftReactNode

Text to show as inline label at the left of the input field.

since v. 5.0.0
inlineLabelRightReactNode

Text to show as inline label at the right of the input field.

since v. 5.0.0
innerRefRef<HTMLInputElement> | undefined

React ref forwarded to the input field.

since v. 4.0.0
labelstring | LabelComp | undefined

The label is forwarded to the component and accepts a plain string or a custom made `Label` component. If the component does not have a visible label then `aria-label` is required. Label

The LegacyAutocompleteInput is a wrapper on the Input component that adds all the required ARIA attributes and handlers for it to properly work within the LegacyAutocomplete component.

It accepts any props you would normally send to the Input component.

Using the LegacyAutocompleteInput to make a combo box

The combo box pattern works as a custom-built select, which you can use to add custom formatting to the options and the input.

In essence, it is a regular text input with added functionality and accessibility features to make it look and behave like a combo box (aka: select).

For example: showing icons inside the options, or customizing the value displayed after selecting an option.

import { LegacyAutocomplete, LegacyAutocompleteInput, LegacyAutocompleteOptions, Heading } from '@flixbus/honeycomb-react';
import { Icon, IconArrowDown, IconArrowUp, IconQuestion, IconBeach, IconCity, IconCoffee, IconDrinks, IconForrest, IconMountains, IconPlayingcard } from '@flixbus/honeycomb-icons-react';

const [open, setOpen] = React.useState(false);
const [data, setData] = React.useState([]);
const [selectedItem, setSelectedItem] = React.useState();

// --------------------------
// Mock data and the filter function
const LEISURE_TYPES = [
  {
    title: 'Beach',
    icon: IconBeach,
    key: 'beach',
  },
  {
    title: 'Cassino',
    icon: IconPlayingcard,
    key: 'cassino',
  },
  {
    title: 'City sights',
    icon: IconCity,
    key: 'city-sights',
  },
  {
    title: 'Coffee shops',
    icon: IconCoffee,
    key: 'coffee-shops',
  },
  {
    title: 'Nightlife',
    icon: IconDrinks,
    key: 'nightlife',
  },
  {
    title: 'Forrest',
    icon: IconForrest,
    key: 'forrest',
  },
  {
    title: 'Mountains',
    icon: IconMountains,
    key: 'mountains',
  },
];

<LegacyAutocomplete
  options={data}
  value={selectedItem && selectedItem.title}
  onFocus={() => {
    setData(LEISURE_TYPES);
    setOpen(true);
  }}
  onDebounce={(e) => {
    const searchQuery = e.target.value;
    const filteredOptions = LEISURE_TYPES.filter(item => item.title.toLowerCase().includes(searchQuery.toLowerCase()));
    setSelectedItem();
    setData(filteredOptions);
  }}
  onSelect={(item) => {
    setSelectedItem(item);
    setData([]);
    setOpen(false);
  }}
  onBlur={() => setOpen(false)}
>
  <LegacyAutocompleteInput
    id="autocomplete-render"
    placeholder="Search for leisure types..."
    label="Leisure types:"
    type="text"
    autoComplete="off"
    iconLeft={<Icon InlineIcon={selectedItem ? selectedItem.icon : IconQuestion} />}
    iconRight={<Icon InlineIcon={open ? IconArrowUp : IconArrowDown} />}
  />
  <LegacyAutocompleteOptions
    appearance="boxed"
    label="Leisure types"
    optionsToDisplay={6}
    optionHasSubtitle={false}
    renderOption={({ icon, title }) => (
      <Heading Elem="span" size={4} flushSpace sectionHeader>
        <Icon InlineIcon={icon} /> {title}
      </Heading>
    )}
  />
</LegacyAutocomplete>