DooPage - React UI Kit
Edit page
Getting Started
Theme
Components
AutoComplete
Button
Checkbox
Checkbox
Chip Input
Date Range Input
DateTime Input
Input
Radio
Select
Select Locale
Switch

Chip Input

Base on Auto Complete

Related component

  • Auto Complete

Basic usage

import { ChipInput } from '@doopage/react-ui-kit'


const Example = () => <ChipInput label={'Chip Input'}/>;


export default Example;

Playground

Normal

Advanced

Value: default value, llll

Properties

Prop nameTypeDefaultRequiredDescription
hideboolean | undefined—false
loadingboolean | undefined—false

If true, the component is in a loading state.

inputPropsInputProps | undefined—false
optionsMenuItemProps[] | undefined—false
labelstring | undefined—false
placeholderstring | undefined—false
errorstring | undefined—false
helperTextstring | undefined—false
variant"outlined" | "standard" | "filled" | undefined—false
chipColor"info" | "success" | "danger" | "warning" | "primary" | "white" | "rose" | "gray" | undefined—false
onChange((id: string, value: any) => void) | undefined—false
getData((value: string) => void) | undefined—false
setCreateText((inputValue: string) => string) | undefined—false
allowCreateboolean | undefined—false
chipPropsChipProps | undefined—false
allowDuplicatesboolean | undefined—false
showCreateTextboolean | undefined—false
createOnBlurboolean | undefined—false
titlestring | undefined—false
disabledboolean | undefined—false

If true, the input will be disabled.

classesPartial<Record<AutocompleteClassKey, string>> | undefined—false

Override or extend the styles applied to the component.

defaultCheckedboolean | undefined—false
defaultValueany—false

The default input value. Use when the component is not controlled.

suppressContentEditableWarningboolean | undefined—false
suppressHydrationWarningboolean | undefined—false
accessKeystring | undefined—false
classNamestring | undefined—false
contentEditableboolean | "true" | "false" | "inherit" | undefined—false
contextMenustring | undefined—false
dirstring | undefined—false
draggableboolean | "true" | "false" | undefined—false
hiddenboolean | undefined—false
idstring | undefined—false

This prop is used to help implement the accessibility logic. If you don’t provide this prop. It falls back to a randomly generated id.

langstring | undefined—false
slotstring | undefined—false
spellCheckboolean | "true" | "false" | undefined—false
styleCSSProperties | undefined—false
tabIndexnumber | undefined—false
translate"yes" | "no" | undefined—false
radioGroupstring | undefined—false
rolestring | undefined—false
aboutstring | undefined—false
datatypestring | undefined—false
inlistany—false
prefixstring | undefined—false
propertystring | undefined—false
resourcestring | undefined—false
typeofstring | undefined—false
vocabstring | undefined—false
autoCapitalizestring | undefined—false
autoCorrectstring | undefined—false
autoSavestring | undefined—false
colorstring | undefined—false
itemPropstring | undefined—false
itemScopeboolean | undefined—false
itemTypestring | undefined—false
itemIDstring | undefined—false
itemRefstring | undefined—false
resultsnumber | undefined—false
securitystring | undefined—false
unselectable"on" | "off" | undefined—false
inputMode"none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined—false

Hints at the type of data that might be entered by the user while editing the element or its contents @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

isstring | undefined—false

Specify that a standard HTML element should behave like a defined custom built-in element @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

aria-activedescendantstring | undefined—false

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

aria-atomicboolean | "true" | "false" | undefined—false

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

aria-autocomplete"none" | "inline" | "list" | "both" | undefined—false

Indicates whether inputting text could trigger display of one or more predictions of the user’s intended value for an input and specifies how predictions would be presented if they are made.

aria-busyboolean | "true" | "false" | undefined—false

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.

aria-checkedboolean | "true" | "false" | "mixed" | undefined—false

Indicates the current “checked” state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected.

aria-colcountnumber | undefined—false

Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex.

aria-colindexnumber | undefined—false

Defines an element’s column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan.

aria-colspannumber | undefined—false

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan.

aria-controlsstring | undefined—false

Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.

aria-currentboolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined—false

Indicates the element that represents the current item within a container or set of related elements.

aria-describedbystring | undefined—false

Identifies the element (or elements) that describes the object. @see aria-labelledby

aria-detailsstring | undefined—false

Identifies the element that provides a detailed, extended description for the object. @see aria-describedby.

aria-disabledboolean | "true" | "false" | undefined—false

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly.

aria-dropeffect"none" | "copy" | "execute" | "link" | "move" | "popup" | undefined—false

Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1

aria-errormessagestring | undefined—false

Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby.

aria-expandedboolean | "true" | "false" | undefined—false

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

aria-flowtostring | undefined—false

Identifies the next element (or elements) in an alternate reading order of content which, at the user’s discretion, allows assistive technology to override the general default of reading in document source order.

aria-grabbedboolean | "true" | "false" | undefined—false

Indicates an element’s “grabbed” state in a drag-and-drop operation. @deprecated in ARIA 1.1

aria-haspopupboolean | "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined—false

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

aria-hiddenboolean | "true" | "false" | undefined—false

Indicates whether the element is exposed to an accessibility API. @see aria-disabled.

aria-invalidboolean | "true" | "false" | "grammar" | "spelling" | undefined—false

Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage.

aria-keyshortcutsstring | undefined—false

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

aria-labelstring | undefined—false

Defines a string value that labels the current element. @see aria-labelledby.

aria-labelledbystring | undefined—false

Identifies the element (or elements) that labels the current element. @see aria-describedby.

aria-levelnumber | undefined—false

Defines the hierarchical level of an element within a structure.

aria-live"off" | "assertive" | "polite" | undefined—false

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

aria-modalboolean | "true" | "false" | undefined—false

Indicates whether an element is modal when displayed.

aria-multilineboolean | "true" | "false" | undefined—false

Indicates whether a text box accepts multiple lines of input or only a single line.

aria-multiselectableboolean | "true" | "false" | undefined—false

Indicates that the user may select more than one item from the current selectable descendants.

aria-orientation"horizontal" | "vertical" | undefined—false

Indicates whether the element’s orientation is horizontal, vertical, or unknown/ambiguous.

aria-ownsstring | undefined—false

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls.

aria-placeholderstring | undefined—false

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

aria-posinsetnumber | undefined—false

Defines an element’s number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize.

aria-pressedboolean | "true" | "false" | "mixed" | undefined—false

Indicates the current “pressed” state of toggle buttons. @see aria-checked @see aria-selected.

aria-readonlyboolean | "true" | "false" | undefined—false

Indicates that the element is not editable, but is otherwise operable. @see aria-disabled.

aria-relevant"text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined—false

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic.

aria-requiredboolean | "true" | "false" | undefined—false

Indicates that user input is required on the element before a form may be submitted.

aria-roledescriptionstring | undefined—false

Defines a human-readable, author-localized description for the role of an element.

aria-rowcountnumber | undefined—false

Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex.

aria-rowindexnumber | undefined—false

Defines an element’s row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan.

aria-rowspannumber | undefined—false

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan.

aria-selectedboolean | "true" | "false" | undefined—false

Indicates the current “selected” state of various widgets. @see aria-checked @see aria-pressed.

aria-setsizenumber | undefined—false

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset.

aria-sort"none" | "ascending" | "descending" | "other" | undefined—false

Indicates if items in a table or grid are sorted in ascending or descending order.

aria-valuemaxnumber | undefined—false

Defines the maximum allowed value for a range widget.

aria-valueminnumber | undefined—false

Defines the minimum allowed value for a range widget.

aria-valuenownumber | undefined—false

Defines the current value for a range widget. @see aria-valuetext.

aria-valuetextstring | undefined—false

Defines the human readable text alternative of aria-valuenow for a range widget.

dangerouslySetInnerHTML{ __html: string; } | undefined—false
onCopy((event: ClipboardEvent<HTMLDivElement>) => void) | undefined—false
onCopyCapture((event: ClipboardEvent<HTMLDivElement>) => void) | undefined—false
onCut((event: ClipboardEvent<HTMLDivElement>) => void) | undefined—false
onCutCapture((event: ClipboardEvent<HTMLDivElement>) => void) | undefined—false
onPaste((event: ClipboardEvent<HTMLDivElement>) => void) | undefined—false
onPasteCapture((event: ClipboardEvent<HTMLDivElement>) => void) | undefined—false
onCompositionEnd((event: CompositionEvent<HTMLDivElement>) => void) | undefined—false
onCompositionEndCapture((event: CompositionEvent<HTMLDivElement>) => void) | undefined—false
onCompositionStart((event: CompositionEvent<HTMLDivElement>) => void) | undefined—false
onCompositionStartCapture((event: CompositionEvent<HTMLDivElement>) => void) | undefined—false
onCompositionUpdate((event: CompositionEvent<HTMLDivElement>) => void) | undefined—false
onCompositionUpdateCapture((event: CompositionEvent<HTMLDivElement>) => void) | undefined—false
onFocus((event: FocusEvent<HTMLDivElement>) => void) | undefined—false
onFocusCapture((event: FocusEvent<HTMLDivElement>) => void) | undefined—false
onBlur((event: FocusEvent<HTMLDivElement>) => void) | undefined—false
onBlurCapture((event: FocusEvent<HTMLDivElement>) => void) | undefined—false
onChangeCapture((event: FormEvent<HTMLDivElement>) => void) | undefined—false
onBeforeInput((event: FormEvent<HTMLDivElement>) => void) | undefined—false
onBeforeInputCapture((event: FormEvent<HTMLDivElement>) => void) | undefined—false
onInput((event: FormEvent<HTMLDivElement>) => void) | undefined—false
onInputCapture((event: FormEvent<HTMLDivElement>) => void) | undefined—false
onReset((event: FormEvent<HTMLDivElement>) => void) | undefined—false
onResetCapture((event: FormEvent<HTMLDivElement>) => void) | undefined—false
onSubmit((event: FormEvent<HTMLDivElement>) => void) | undefined—false
onSubmitCapture((event: FormEvent<HTMLDivElement>) => void) | undefined—false
onInvalid((event: FormEvent<HTMLDivElement>) => void) | undefined—false
onInvalidCapture((event: FormEvent<HTMLDivElement>) => void) | undefined—false
onLoad((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onLoadCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onError((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onErrorCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onKeyDown((event: KeyboardEvent<HTMLDivElement>) => void) | undefined—false
onKeyDownCapture((event: KeyboardEvent<HTMLDivElement>) => void) | undefined—false
onKeyPress((event: KeyboardEvent<HTMLDivElement>) => void) | undefined—false
onKeyPressCapture((event: KeyboardEvent<HTMLDivElement>) => void) | undefined—false
onKeyUp((event: KeyboardEvent<HTMLDivElement>) => void) | undefined—false
onKeyUpCapture((event: KeyboardEvent<HTMLDivElement>) => void) | undefined—false
onAbort((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onAbortCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onCanPlay((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onCanPlayCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onCanPlayThrough((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onCanPlayThroughCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onDurationChange((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onDurationChangeCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onEmptied((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onEmptiedCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onEncrypted((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onEncryptedCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onEnded((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onEndedCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onLoadedData((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onLoadedDataCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onLoadedMetadata((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onLoadedMetadataCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onLoadStart((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onLoadStartCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onPause((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onPauseCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onPlay((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onPlayCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onPlaying((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onPlayingCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onProgress((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onProgressCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onRateChange((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onRateChangeCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onSeeked((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onSeekedCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onSeeking((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onSeekingCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onStalled((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onStalledCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onSuspend((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onSuspendCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onTimeUpdate((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onTimeUpdateCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onVolumeChange((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onVolumeChangeCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onWaiting((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onWaitingCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onAuxClick((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onAuxClickCapture((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onClick((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onClickCapture((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onContextMenu((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onContextMenuCapture((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onDoubleClick((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onDoubleClickCapture((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onDrag((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDragCapture((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDragEnd((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDragEndCapture((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDragEnter((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDragEnterCapture((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDragExit((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDragExitCapture((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDragLeave((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDragLeaveCapture((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDragOver((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDragOverCapture((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDragStart((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDragStartCapture((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDrop((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onDropCapture((event: DragEvent<HTMLDivElement>) => void) | undefined—false
onMouseDown((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onMouseDownCapture((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onMouseEnter((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onMouseLeave((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onMouseMove((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onMouseMoveCapture((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onMouseOut((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onMouseOutCapture((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onMouseOver((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onMouseOverCapture((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onMouseUp((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onMouseUpCapture((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined—false
onSelect((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onSelectCapture((event: SyntheticEvent<HTMLDivElement, Event>) => void) | undefined—false
onTouchCancel((event: TouchEvent<HTMLDivElement>) => void) | undefined—false
onTouchCancelCapture((event: TouchEvent<HTMLDivElement>) => void) | undefined—false
onTouchEnd((event: TouchEvent<HTMLDivElement>) => void) | undefined—false
onTouchEndCapture((event: TouchEvent<HTMLDivElement>) => void) | undefined—false
onTouchMove((event: TouchEvent<HTMLDivElement>) => void) | undefined—false
onTouchMoveCapture((event: TouchEvent<HTMLDivElement>) => void) | undefined—false
onTouchStart((event: TouchEvent<HTMLDivElement>) => void) | undefined—false
onTouchStartCapture((event: TouchEvent<HTMLDivElement>) => void) | undefined—false
onPointerDown((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerDownCapture((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerMove((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerMoveCapture((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerUp((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerUpCapture((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerCancel((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerCancelCapture((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerEnter((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerEnterCapture((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerLeave((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerLeaveCapture((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerOver((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerOverCapture((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerOut((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onPointerOutCapture((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onGotPointerCapture((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onGotPointerCaptureCapture((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onLostPointerCapture((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onLostPointerCaptureCapture((event: PointerEvent<HTMLDivElement>) => void) | undefined—false
onScroll((event: UIEvent<HTMLDivElement, UIEvent>) => void) | undefined—false
onScrollCapture((event: UIEvent<HTMLDivElement, UIEvent>) => void) | undefined—false
onWheel((event: WheelEvent<HTMLDivElement>) => void) | undefined—false
onWheelCapture((event: WheelEvent<HTMLDivElement>) => void) | undefined—false
onAnimationStart((event: AnimationEvent<HTMLDivElement>) => void) | undefined—false
onAnimationStartCapture((event: AnimationEvent<HTMLDivElement>) => void) | undefined—false
onAnimationEnd((event: AnimationEvent<HTMLDivElement>) => void) | undefined—false
onAnimationEndCapture((event: AnimationEvent<HTMLDivElement>) => void) | undefined—false
onAnimationIteration((event: AnimationEvent<HTMLDivElement>) => void) | undefined—false
onAnimationIterationCapture((event: AnimationEvent<HTMLDivElement>) => void) | undefined—false
onTransitionEnd((event: TransitionEvent<HTMLDivElement>) => void) | undefined—false
onTransitionEndCapture((event: TransitionEvent<HTMLDivElement>) => void) | undefined—false
innerRef((instance: any) => void) | RefObject<any> | null | undefined—false
ref((instance: unknown) => void) | RefObject<unknown> | null | undefined—false
ChipPropsobject | undefined—false

Props applied to the Chip element.

closeIconReactNode—false

The icon to display in place of the default close icon.

clearTextstring | undefined—false

Override the default text for the clear icon button.

For localization purposes, you can use the provided translations.

closeTextstring | undefined—false

Override the default text for the close popup icon button.

For localization purposes, you can use the provided translations.

disablePortalboolean | undefined—false

Disable the portal behavior. The children stay within it’s parent DOM hierarchy.

forcePopupIconboolean | "auto" | undefined—false

Force the visibility display of the popup icon.

fullWidthboolean | undefined—false

If true, the input will take up the full width of its container.

getLimitTagsText((more: number) => ReactNode) | undefined—false

The label to display when the tags are truncated (limitTags). @param more The number of truncated tags. @returns

ListboxComponentComponentClass<HTMLAttributes<HTMLElement>, any> | FunctionComponent<HTMLAttributes<HTMLElement>> | undefined—false

The component used to render the listbox.

ListboxPropsobject | undefined—false

Props applied to the Listbox element.

loadingTextReactNode—false

Text to display when in a loading state.

For localization purposes, you can use the provided translations.

limitTagsnumber | undefined—false

The maximum number of tags that will be visible when not focused. Set -1 to disable the limit.

noOptionsTextReactNode—false

Text to display when there are no options.

For localization purposes, you can use the provided translations.

openTextstring | undefined—false

Override the default text for the open popup icon button.

For localization purposes, you can use the provided translations.

PaperComponentComponentClass<HTMLAttributes<HTMLElement>, any> | FunctionComponent<HTMLAttributes<HTMLElement>> | undefined—false

The component used to render the body of the popup.

PopperComponentComponentClass<PopperProps, any> | FunctionComponent<PopperProps> | undefined—false

The component used to position the popup.

popupIconReactNode—false

The icon to display in place of the default popup icon.

renderGroup((params: AutocompleteRenderGroupParams) => ReactNode) | undefined—false

Render the group. @param option The group to render. @returns

renderOption((option: any, state: AutocompleteRenderOptionState) => ReactNode) | undefined—false

Render the option, use getOptionLabel by default. @param option The option to render. @param state The state of the component. @returns

renderTags((value: any[], getTagProps: AutocompleteGetTagProps) => ReactNode) | undefined—false

Render the selected value. @param value The value provided to the component. @param getTagProps A tag props getter. @returns

size"small" | "medium" | undefined—false

The size of the autocomplete.

autoCompleteboolean | undefined—false

If true, the portion of the selected suggestion that has not been typed by the user, known as the completion string, appears inline after the input cursor in the textbox. The inline completion string is visually highlighted and has a selected state.

autoHighlightboolean | undefined—false

If true, the first option is automatically highlighted.

autoSelectboolean | undefined—false

If true, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input.

blurOnSelectboolean | "mouse" | "touch" | undefined—false

Control if the input should be blurred when an option is selected:

  • false the input is not blurred.
  • true the input is always blurred.
  • touch the input is blurred after a touch event.
  • mouse the input is blurred after a mouse event.
clearOnBlurboolean | undefined—false

If true, the input’s text will be cleared on blur if no value is selected.

Set to true if you want to help the user enter a new value. Set to false if you want to help the user resume his search.

clearOnEscapeboolean | undefined—false

If true, clear all values when the user presses escape and the popup is closed.

componentNamestring | undefined—false

The component name that is using this hook. Used for warnings.

debugboolean | undefined—false

If true, the popup will ignore the blur event if the input is filled. You can inspect the popup markup with your browser tools. Consider this option when you need to customize the component.

disableClearableany—false

If true, the input can’t be cleared.

disableCloseOnSelectboolean | undefined—false

If true, the popup won’t close when a value is selected.

disabledItemsFocusableboolean | undefined—false

If true, will allow focus on disabled items.

disableListWrapboolean | undefined—false

If true, the list box in the popup will not wrap focus.

filterOptions((options: any[], state: FilterOptionsState<any>) => any[]) | undefined—false

A filter function that determines the options that are eligible. @param options The options to render. @param state The state of the component. @returns

filterSelectedOptionsboolean | undefined—false

If true, hide the selected options from the list box.

freeSoloany—false

If true, the Autocomplete is free solo, meaning that the user input is not bound to provided options.

getOptionDisabled((option: any) => boolean) | undefined—false

Used to determine the disabled state for a given option. @param option The option to test. @returns

getOptionLabel((option: any) => string) | undefined—false

Used to determine the string value for a given option. It’s used to fill the input (and the list box options if renderOption is not provided). @param option @returns

getOptionSelected((option: any, value: any) => boolean) | undefined—false

Used to determine if an option is selected, considering the current value. Uses strict equality by default. @param option The option to test. @param value The value to test against. @returns

groupBy((option: any) => string) | undefined—false

If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when renderGroup is not provided. @param options The options to group. @returns

handleHomeEndKeysboolean | undefined—false

If true, the component handles the “Home” and “End” keys when the popup is open. It should move focus to the first option and last option, respectively.

includeInputInListboolean | undefined—false

If true, the highlight can move to the input.

inputValuestring | undefined—false

The input value.

onClose((event: ChangeEvent<{}>, reason: AutocompleteCloseReason) => void) | undefined—false

Callback fired when the popup requests to be closed. Use in controlled mode (see open). @param event The event source of the callback. @param reason Can be: "toggleInput", "escape", "select-option", "blur".

onInputChange((event: ChangeEvent<{}>, value: string, reason: AutocompleteInputChangeReason) => void) | undefined—false

Callback fired when the input value changes. @param event The event source of the callback. @param value The new value of the text input. @param reason Can be: "input" (user input), "reset" (programmatic change), "clear".

onOpen((event: ChangeEvent<{}>) => void) | undefined—false

Callback fired when the popup requests to be opened. Use in controlled mode (see open). @param event The event source of the callback.

onHighlightChange((event: ChangeEvent<{}>, option: any, reason: AutocompleteHighlightChangeReason) => void) | undefined—false

Callback fired when the highlight option changes. @param event The event source of the callback. @param option The highlighted option. @param reason Can be: "keyboard", "auto", "mouse".

openboolean | undefined—false

Control the popup` open state.

openOnFocusboolean | undefined—false

If true, the popup will open on input focus.

selectOnFocusboolean | undefined—false

If true, the input’s text will be selected on focus. It helps the user clear the selected value.

multipleany—false

If true, value must be an array and the menu will support multiple selections.

valueany—false

The value of the autocomplete.

The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the getOptionSelected prop.