Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.1

MultiAutocomplete

MultiAutocomplete is a component used to display suggestions based on user text input and to obtain multiple values.

Source@yamada-ui/autocomplete

Props

MultiAutocompleteProps

allowCreate

Description

If true, enables the creation of autocomplete option.

Type

boolean

Default

false

allowFree

Description

If true, enables the free input.

Type

boolean

animation

Description

The animation of the popover.

Type

"bottom" | "left" | "right" | "scale" | "top" | "none"

Default

'scale'

boundary

Description

The boundary area for the popper. Used within the preventOverflow modifier.

Type

HTMLElement | "clippingParents" | "scrollParent"

Default

'clippingParents'

clearIconProps

Description

Props for multi autocomplete clear icon element.

Type

AutocompleteIconProps

closeOnBlur

Description

If true, the popover will close when you blur out it by clicking outside or tabbing out.

Type

boolean

Default

true

closeOnEsc

Description

If true, the popover will close when you hit the Esc key.

Type

boolean

Default

true

closeOnSelect

Description

If true, the list element will be closed when value is selected.

Type

boolean

Default

false

colorScheme

Description

The visual color appearance of the component.

Type

"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "danger" | "rose" | "pink" | "flashy" | "orange" | "warning" | "amber" | "yellow" | "lime" | "green" | "success" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "primary" | "info" | "link" | "indigo" | "violet" | "secondary" | "purple" | "fuchsia"

component

Description

The custom display value to use.

Type

FC<{ value: string | number label: string index: number onRemove: MouseEventHandler<HTMLElement> }>

containerProps

Description

Props for multi autocomplete container element.

Type

Omit<HTMLUIProps<"div">, "children">

contentProps

Description

Props for multi autocomplete content element.

Type

Omit<MotionProps<"div">, "children">

createProps

Description

Props for autocomplete create element.

Type

Omit<AutocompleteCreateProps, "children">

defaultIsOpen

Description

If true, the popover will be initially opened.

Type

boolean

defaultValue

Description

The initial value of the autocomplete.

Type

string[]

duration

Description

The animation duration.

Type

number | Partial<Record<"enter" | "exit", number>>

emptyMessage

Description

The message displayed when the search yields no hits.

Type

string

Default

'No results found'

emptyProps

Description

Props for autocomplete empty element.

Type

Omit<AutocompleteEmptyProps, "children">

errorBorderColor

Description

The border color when the input is invalid.

Type

string

eventListeners

Description

If provided, determines whether the popper will reposition itself on scroll and resize of the window.

Type

type ONLY_FOR_FORMAT = | boolean | { scroll?: boolean | undefined; resize?: boolean | undefined }

Default

true

fieldProps

Description

Props for multi autocomplete field element.

Type

Omit<MultiAutocompleteFieldProps, "children" | "separator" | "inputProps" | "component" | "keepPlaceholder">

flip

Description

If true, the popper will change its placement and flip when it's about to overflow its boundary area.

Type

boolean

Default

true

focusBorderColor

Description

The border color when the input is focused.

Type

string

format

Description

Function to format text when search input.

Type

(value: string) => string

gutter

Description

The distance or margin between the reference and popper. It is used internally to create an offset modifier.

Type

UIValue<number>

Default

8

header

Description

The header of the autocomplete content element.

Type

string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | FC<...>

iconProps

Description

Props for multi autocomplete icon element.

Type

AutocompleteIconProps

inputProps

Description

Props for multi autocomplete input element.

Type

HTMLUIProps<"input">

insertPositionItem

Description

The position to be inserted when the autocomplete option is created.

Type

Union<"first" | "last"> | [string, "first" | "last"]

Default

'first'

isClearable

Description

If true, display the select clear icon.

Type

boolean

Default

true

isDisabled

Description

If true, the form control will be disabled.

Type

boolean

Default

false

isInvalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isLazy

Description

If true, the PopoverContent rendering will be deferred until the popover is open.

Type

boolean

Default

false

isOpen

Description

If true, the popover will be opened.

Type

boolean

isReadOnly

Description

If true, the form control will be readonly.

Type

boolean

Default

false

isRequired

Description

If true, the form control will be required.

Type

boolean

Default

false

items

Description

If provided, generate options based on items.

Type

AutocompleteItem[]

keepPlaceholder

Description

If true, keep the placeholder.

Type

boolean

Default

false

lazyBehavior

Description

The lazy behavior of popover's content when not visible. Only works when isLazy={true} - unmount: The popover's content is always unmounted when not open. - keepMounted: The popover's content initially unmounted, but stays mounted when popover is open.

Type

LazyMode

Default

'unmount'

listProps

Description

Props for multi autocomplete list element.

Type

Omit<AutocompleteListProps, "children">

matchWidth

Description

If true, the popper will match the width of the reference at all times. It's useful for autocomplete, date-picker and select patterns.

Type

boolean

Default

false

maxSelectValues

Description

The maximum selectable value.

Type

number

modifiers

Description

Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.

Type

Partial<Modifier<string, any>>[]

Docs

https://popper.js.org/docs/v2/modifiers/

offset

Description

The main and cross-axis offset to displace popper element from its reference element.

Type

[number, number]

omitSelectedValues

Description

If true, the selected item(s) will be excluded from the list.

Type

boolean

Default

false

onChange

Description

The callback invoked when value state changes.

Type

(value: string[]) => void

onClose

Description

Callback fired when the popover closes.

Type

() => void

onCreate

Description

The callback invoked when autocomplete option created.

Type

( newItem: AutocompleteItem, newItems: AutocompleteItem[], ) => void

onOpen

Description

Callback fired when the popover opens.

Type

() => void

onSearch

Description

The callback invoked when search input.

Type

(ev: ChangeEvent<HTMLInputElement>) => void

optionProps

Description

Props for select option element.

Type

Omit<AutocompleteOptionProps, "value" | "children">

placement

Description

The placement of the popper relative to its reference.

Type

UIValue<Placement>

Default

'bottom'

portalProps

Description

Props to be forwarded to the portal component.

Type

Omit<PortalProps, "children">

Default

'{ isDisabled: true }'

preventOverflow

Description

If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.

Type

boolean

Default

true

relatedRef

Description

The ref of the element related to the popover. This is used during the onBlur event.

Type

RefObject<HTMLElement>

separator

Description

The visual separator between each value.

Type

string

Default

','

size

Description

The size of the MultiAutocomplete.

Type

"xs" | "sm" | "md" | "lg"

Default

md

strategy

Description

The CSS positioning strategy to use.

Type

"fixed" | "absolute"

Default

'absolute'

value

Description

The value of the autocomplete.

Type

string[]

variant

Description

The variant of the MultiAutocomplete.

Type

"outline" | "filled" | "flushed" | "unstyled"

Default

outline

Edit this page on GitHub

PreviousAutocompleteNextDatePicker