Grapes homepage1.57.0
  • Guide
  • Tokens
  • Components
    Grapes on GithubGrapes on Figma
    Interaction
    • Button
    • IconButton
    • FloatingActionBar
    • Link
    Icons
    • Icon
    • HighlightIcon
    Form
    • AmountInput
    • Autocomplete
    • AutocompleteMultiple
    • AutocompletePlace
    • CheckboxBox
    • CheckboxField
    • DatePicker
    • FormField
    • Input
    • OptionGroup
    • PasswordInput
    • PhoneInput
    • RadioBox
    • RadioField
    • RadioGroup
    • Select
    • SwitchField
    • TextArea
    • TextInput
    • Upload
    • UploadButton
    Feedback
    • Badge
    • Banner
    • Callout
    • EmptyState
    • Modal
    • ModalSlideshow
    • DeprecatedModalSlideshow
    • PageModal
    • Skeleton
    • Tag
    • Toast
    • Tooltip
    Data display
    • Accordion
    • Avatar
    • Box
    • Calendar
    • CalendarRange
    • CollapsibleList
    • FileCard
    • InfoTip
    • ListBox
    • ListView
    • Panel
    • SidePanel
    • DeprecatedPreview
    • Table
    • Timeline
    • useDateFormatter
    Navigation
    • DropdownItem
    • DropdownMenu
    • Navigation
    • NavigationItem
    • Popover
    • Tabs

    AutocompleteMultiple

    The autocompleteMultiple is a text input enhanced by a list of suggested options. This component is useful when the user has to choosemultiple options from a predefined list.

    This component shouldn't be used in the following scenarios:

    • The input may contain only one option. Please refer to the Autocomplete component
    • The input must be an address. Please refer to the AutocompletePlace component
    View source code
    • Usage
    • Props
    • onSearch
      (value: string) => void | Promise<void>

      Handler that is called when the input changes.

    • onSelect
      (values: T[]) => void

      Handler that is called when a option is selected.

    • options
      (T | OptionGroup<T>)[]

      The list of ComboBox options.

    • translations
      { selectAll?: string; selected: string; }

      Translations for the selected states of the AutocompleteMultiple.

    • values
      T[]

      The current value.

    • className
      string

      className for the element

    • dropdownMenuContentMaxHeight
      string

      Maximum height of the dropdown menu.

    • fit
      "content" | "parent"

      Whether the AutocompleteMultiple should fit its parents or content.

      Default: content
    • isDisabled
      boolean

      Whether the AutocompleteMultiple is disabled.

    • isInvalid
      boolean

      Whether the AutocompleteMultiple is invalid.

    • isLoading
      boolean

      Whether the AutocompleteMultiple is loading.

    • name
      string

      The name of the Combobox, used when submitting an HTML form.

    • onBlur
      FocusEventHandler<HTMLInputElement>

      Handler that is called when the element loses focus.

    • onFocus
      FocusEventHandler<HTMLInputElement>

      Handler that is called when the element receives focus.

    • placeholder
      string

      Temporary text that occupies the Combobox when it is empty.

    • placement
      "bottom-end" | "bottom-start" | "end-bottom" | "end-top" | "top-end" | "top-start"

      Placement the menu will render relative to the field

    • renderNoOptions
      (rawValue: string) => ReactNode

      Function to render when no options are available

    • renderOptionGroup
      (optionGroup: OptionGroup<T>) => ReactNode

      Function to render option group.

    • showClearSelectionButton
      boolean

      Whether the combobox should show a clear button.

      Default: false