Interface GridFilterInputMultipleSingleSelectProps

interface GridFilterInputMultipleSingleSelectProps {
    about?: string;
    accessKey?: string;
    apiRef: MutableRefObject<GridApiCommunity>;
    applyValue: ((value: GridFilterItem) => void);
    aria-activedescendant?: string;
    aria-atomic?: Booleanish;
    aria-autocomplete?:
        | "none"
        | "list"
        | "both"
        | "inline";
    aria-braillelabel?: string;
    aria-brailleroledescription?: string;
    aria-busy?: Booleanish;
    aria-checked?:
        | boolean
        | "true"
        | "mixed"
        | "false";
    aria-colcount?: number;
    aria-colindex?: number;
    aria-colindextext?: string;
    aria-colspan?: number;
    aria-controls?: string;
    aria-current?:
        | boolean
        | "true"
        | "page"
        | "time"
        | "step"
        | "false"
        | "location"
        | "date";
    aria-describedby?: string;
    aria-description?: string;
    aria-details?: string;
    aria-disabled?: Booleanish;
    aria-dropeffect?:
        | "link"
        | "none"
        | "copy"
        | "move"
        | "execute"
        | "popup";
    aria-errormessage?: string;
    aria-expanded?: Booleanish;
    aria-flowto?: string;
    aria-grabbed?: Booleanish;
    aria-haspopup?:
        | boolean
        | "menu"
        | "true"
        | "grid"
        | "dialog"
        | "listbox"
        | "false"
        | "tree";
    aria-hidden?: Booleanish;
    aria-invalid?:
        | boolean
        | "true"
        | "false"
        | "grammar"
        | "spelling";
    aria-keyshortcuts?: string;
    aria-label?: string;
    aria-labelledby?: string;
    aria-level?: number;
    aria-live?: "assertive" | "polite" | "off";
    aria-modal?: Booleanish;
    aria-multiline?: Booleanish;
    aria-multiselectable?: Booleanish;
    aria-orientation?: "horizontal" | "vertical";
    aria-owns?: string;
    aria-placeholder?: string;
    aria-posinset?: number;
    aria-pressed?:
        | boolean
        | "true"
        | "mixed"
        | "false";
    aria-readonly?: Booleanish;
    aria-relevant?:
        | "all"
        | "text"
        | "additions"
        | "additions removals"
        | "additions text"
        | "removals"
        | "removals additions"
        | "removals text"
        | "text additions"
        | "text removals";
    aria-required?: Booleanish;
    aria-roledescription?: string;
    aria-rowcount?: number;
    aria-rowindex?: number;
    aria-rowindextext?: string;
    aria-rowspan?: number;
    aria-selected?: Booleanish;
    aria-setsize?: number;
    aria-sort?:
        | "none"
        | "other"
        | "ascending"
        | "descending";
    aria-valuemax?: number;
    aria-valuemin?: number;
    aria-valuenow?: number;
    aria-valuetext?: string;
    autoCapitalize?:
        | string & {}
        | "none"
        | "on"
        | "off"
        | "sentences"
        | "words"
        | "characters";
    autoComplete?: boolean;
    autoCorrect?: string;
    autoFocus?: boolean;
    autoHighlight?: boolean;
    autoSave?: string;
    autoSelect?: boolean;
    blurOnSelect?: boolean | "touch" | "mouse";
    ChipProps?: ChipProps<"div">;
    classes?: Partial<AutocompleteClasses>;
    className?: string;
    clearIcon?: ReactNode;
    clearOnBlur?: boolean;
    clearOnEscape?: boolean;
    clearText?: string;
    closeText?: string;
    color?: OverridableStringUnion<
        | "error"
        | "warning"
        | "success"
        | "primary"
        | "secondary"
        | "info", TextFieldPropsColorOverrides>;
    componentName?: string;
    componentsProps?: {
        clearIndicator?: Partial<IconButtonProps>;
        paper?: PaperProps;
        popper?: Partial<PopperProps>;
        popupIndicator?: Partial<IconButtonProps>;
    };
    content?: string;
    contentEditable?: "inherit" | Booleanish | "plaintext-only";
    contextMenu?: string;
    dangerouslySetInnerHTML?: {
        __html: string | TrustedHTML;
    };
    datatype?: string;
    defaultChecked?: boolean;
    defaultValue?: ValueOptions[];
    dir?: string;
    disableClearable?: false;
    disableCloseOnSelect?: boolean;
    disabled?: boolean;
    disabledItemsFocusable?: boolean;
    disableListWrap?: boolean;
    disablePortal?: boolean;
    draggable?: Booleanish;
    enterKeyHint?:
        | "search"
        | "next"
        | "done"
        | "enter"
        | "go"
        | "previous"
        | "send";
    error?: boolean;
    exportparts?: string;
    filterSelectedOptions?: boolean;
    focusElementRef?: Ref<any>;
    forcePopupIcon?: boolean | "auto";
    freeSolo?: true;
    fullWidth?: boolean;
    getLimitTagsText?: ((more: number) => ReactNode);
    getOptionDisabled?: ((option: ValueOptions) => boolean);
    getOptionKey?: ((option: ValueOptions) => string | number);
    groupBy?: ((option: ValueOptions) => string);
    handleHomeEndKeys?: boolean;
    helperText?: ReactNode;
    hidden?: boolean;
    includeInputInList?: boolean;
    inert?: boolean;
    inlist?: any;
    inputMode?:
        | "search"
        | "none"
        | "url"
        | "text"
        | "tel"
        | "email"
        | "numeric"
        | "decimal";
    inputValue?: string;
    is?: string;
    item: GridFilterItem;
    itemID?: string;
    itemProp?: string;
    itemRef?: string;
    itemScope?: boolean;
    itemType?: string;
    lang?: string;
    limitTags?: number;
    ListboxComponent?: JSXElementConstructor<HTMLAttributes<HTMLElement>>;
    ListboxProps?: HTMLAttributes<HTMLUListElement> & {
        ref?: Ref<Element>;
        sx?: SxProps<Theme>;
    };
    loading?: boolean;
    loadingText?: ReactNode;
    nonce?: string;
    noOptionsText?: ReactNode;
    onAbort?: ReactEventHandler<HTMLDivElement>;
    onAbortCapture?: ReactEventHandler<HTMLDivElement>;
    onAnimationEnd?: AnimationEventHandler<HTMLDivElement>;
    onAnimationEndCapture?: AnimationEventHandler<HTMLDivElement>;
    onAnimationIteration?: AnimationEventHandler<HTMLDivElement>;
    onAnimationIterationCapture?: AnimationEventHandler<HTMLDivElement>;
    onAnimationStart?: AnimationEventHandler<HTMLDivElement>;
    onAnimationStartCapture?: AnimationEventHandler<HTMLDivElement>;
    onAuxClick?: MouseEventHandler<HTMLDivElement>;
    onAuxClickCapture?: MouseEventHandler<HTMLDivElement>;
    onBeforeInput?: FormEventHandler<HTMLDivElement>;
    onBeforeInputCapture?: FormEventHandler<HTMLDivElement>;
    onBeforeToggle?: ToggleEventHandler<HTMLDivElement>;
    onBlur?: FocusEventHandler<HTMLDivElement>;
    onBlurCapture?: FocusEventHandler<HTMLDivElement>;
    onCanPlay?: ReactEventHandler<HTMLDivElement>;
    onCanPlayCapture?: ReactEventHandler<HTMLDivElement>;
    onCanPlayThrough?: ReactEventHandler<HTMLDivElement>;
    onCanPlayThroughCapture?: ReactEventHandler<HTMLDivElement>;
    onChangeCapture?: FormEventHandler<HTMLDivElement>;
    onClick?: MouseEventHandler<HTMLDivElement>;
    onClickCapture?: MouseEventHandler<HTMLDivElement>;
    onClose?: ((event: SyntheticEvent<Element, Event>, reason: AutocompleteCloseReason) => void);
    onCompositionEnd?: CompositionEventHandler<HTMLDivElement>;
    onCompositionEndCapture?: CompositionEventHandler<HTMLDivElement>;
    onCompositionStart?: CompositionEventHandler<HTMLDivElement>;
    onCompositionStartCapture?: CompositionEventHandler<HTMLDivElement>;
    onCompositionUpdate?: CompositionEventHandler<HTMLDivElement>;
    onCompositionUpdateCapture?: CompositionEventHandler<HTMLDivElement>;
    onContextMenu?: MouseEventHandler<HTMLDivElement>;
    onContextMenuCapture?: MouseEventHandler<HTMLDivElement>;
    onCopy?: ClipboardEventHandler<HTMLDivElement>;
    onCopyCapture?: ClipboardEventHandler<HTMLDivElement>;
    onCut?: ClipboardEventHandler<HTMLDivElement>;
    onCutCapture?: ClipboardEventHandler<HTMLDivElement>;
    onDoubleClick?: MouseEventHandler<HTMLDivElement>;
    onDoubleClickCapture?: MouseEventHandler<HTMLDivElement>;
    onDrag?: DragEventHandler<HTMLDivElement>;
    onDragCapture?: DragEventHandler<HTMLDivElement>;
    onDragEnd?: DragEventHandler<HTMLDivElement>;
    onDragEndCapture?: DragEventHandler<HTMLDivElement>;
    onDragEnter?: DragEventHandler<HTMLDivElement>;
    onDragEnterCapture?: DragEventHandler<HTMLDivElement>;
    onDragExit?: DragEventHandler<HTMLDivElement>;
    onDragExitCapture?: DragEventHandler<HTMLDivElement>;
    onDragLeave?: DragEventHandler<HTMLDivElement>;
    onDragLeaveCapture?: DragEventHandler<HTMLDivElement>;
    onDragOver?: DragEventHandler<HTMLDivElement>;
    onDragOverCapture?: DragEventHandler<HTMLDivElement>;
    onDragStart?: DragEventHandler<HTMLDivElement>;
    onDragStartCapture?: DragEventHandler<HTMLDivElement>;
    onDrop?: DragEventHandler<HTMLDivElement>;
    onDropCapture?: DragEventHandler<HTMLDivElement>;
    onDurationChange?: ReactEventHandler<HTMLDivElement>;
    onDurationChangeCapture?: ReactEventHandler<HTMLDivElement>;
    onEmptied?: ReactEventHandler<HTMLDivElement>;
    onEmptiedCapture?: ReactEventHandler<HTMLDivElement>;
    onEncrypted?: ReactEventHandler<HTMLDivElement>;
    onEncryptedCapture?: ReactEventHandler<HTMLDivElement>;
    onEnded?: ReactEventHandler<HTMLDivElement>;
    onEndedCapture?: ReactEventHandler<HTMLDivElement>;
    onError?: ReactEventHandler<HTMLDivElement>;
    onErrorCapture?: ReactEventHandler<HTMLDivElement>;
    onFocus?: FocusEventHandler<HTMLDivElement>;
    onFocusCapture?: FocusEventHandler<HTMLDivElement>;
    onGotPointerCapture?: PointerEventHandler<HTMLDivElement>;
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>;
    onHighlightChange?: ((event: SyntheticEvent<Element, Event>, option: null | ValueOptions, reason: AutocompleteHighlightChangeReason) => void);
    onInput?: FormEventHandler<HTMLDivElement>;
    onInputCapture?: FormEventHandler<HTMLDivElement>;
    onInputChange?: ((event: SyntheticEvent<Element, Event>, value: string, reason: AutocompleteInputChangeReason) => void);
    onInvalid?: FormEventHandler<HTMLDivElement>;
    onInvalidCapture?: FormEventHandler<HTMLDivElement>;
    onKeyDown?: ((event: KeyboardEvent<HTMLDivElement> & {
        defaultMuiPrevented?: boolean;
    }) => void);
    onKeyDownCapture?: KeyboardEventHandler<HTMLDivElement>;
    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
    onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>;
    onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
    onKeyUpCapture?: KeyboardEventHandler<HTMLDivElement>;
    onLoad?: ReactEventHandler<HTMLDivElement>;
    onLoadCapture?: ReactEventHandler<HTMLDivElement>;
    onLoadedData?: ReactEventHandler<HTMLDivElement>;
    onLoadedDataCapture?: ReactEventHandler<HTMLDivElement>;
    onLoadedMetadata?: ReactEventHandler<HTMLDivElement>;
    onLoadedMetadataCapture?: ReactEventHandler<HTMLDivElement>;
    onLoadStart?: ReactEventHandler<HTMLDivElement>;
    onLoadStartCapture?: ReactEventHandler<HTMLDivElement>;
    onLostPointerCapture?: PointerEventHandler<HTMLDivElement>;
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>;
    onMouseDown?: MouseEventHandler<HTMLDivElement>;
    onMouseDownCapture?: MouseEventHandler<HTMLDivElement>;
    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
    onMouseMove?: MouseEventHandler<HTMLDivElement>;
    onMouseMoveCapture?: MouseEventHandler<HTMLDivElement>;
    onMouseOut?: MouseEventHandler<HTMLDivElement>;
    onMouseOutCapture?: MouseEventHandler<HTMLDivElement>;
    onMouseOver?: MouseEventHandler<HTMLDivElement>;
    onMouseOverCapture?: MouseEventHandler<HTMLDivElement>;
    onMouseUp?: MouseEventHandler<HTMLDivElement>;
    onMouseUpCapture?: MouseEventHandler<HTMLDivElement>;
    onOpen?: ((event: SyntheticEvent<Element, Event>) => void);
    onPaste?: ClipboardEventHandler<HTMLDivElement>;
    onPasteCapture?: ClipboardEventHandler<HTMLDivElement>;
    onPause?: ReactEventHandler<HTMLDivElement>;
    onPauseCapture?: ReactEventHandler<HTMLDivElement>;
    onPlay?: ReactEventHandler<HTMLDivElement>;
    onPlayCapture?: ReactEventHandler<HTMLDivElement>;
    onPlaying?: ReactEventHandler<HTMLDivElement>;
    onPlayingCapture?: ReactEventHandler<HTMLDivElement>;
    onPointerCancel?: PointerEventHandler<HTMLDivElement>;
    onPointerCancelCapture?: PointerEventHandler<HTMLDivElement>;
    onPointerDown?: PointerEventHandler<HTMLDivElement>;
    onPointerDownCapture?: PointerEventHandler<HTMLDivElement>;
    onPointerEnter?: PointerEventHandler<HTMLDivElement>;
    onPointerLeave?: PointerEventHandler<HTMLDivElement>;
    onPointerMove?: PointerEventHandler<HTMLDivElement>;
    onPointerMoveCapture?: PointerEventHandler<HTMLDivElement>;
    onPointerOut?: PointerEventHandler<HTMLDivElement>;
    onPointerOutCapture?: PointerEventHandler<HTMLDivElement>;
    onPointerOver?: PointerEventHandler<HTMLDivElement>;
    onPointerOverCapture?: PointerEventHandler<HTMLDivElement>;
    onPointerUp?: PointerEventHandler<HTMLDivElement>;
    onPointerUpCapture?: PointerEventHandler<HTMLDivElement>;
    onProgress?: ReactEventHandler<HTMLDivElement>;
    onProgressCapture?: ReactEventHandler<HTMLDivElement>;
    onRateChange?: ReactEventHandler<HTMLDivElement>;
    onRateChangeCapture?: ReactEventHandler<HTMLDivElement>;
    onReset?: FormEventHandler<HTMLDivElement>;
    onResetCapture?: FormEventHandler<HTMLDivElement>;
    onResize?: ReactEventHandler<HTMLDivElement>;
    onResizeCapture?: ReactEventHandler<HTMLDivElement>;
    onScroll?: UIEventHandler<HTMLDivElement>;
    onScrollCapture?: UIEventHandler<HTMLDivElement>;
    onSeeked?: ReactEventHandler<HTMLDivElement>;
    onSeekedCapture?: ReactEventHandler<HTMLDivElement>;
    onSeeking?: ReactEventHandler<HTMLDivElement>;
    onSeekingCapture?: ReactEventHandler<HTMLDivElement>;
    onSelect?: ReactEventHandler<HTMLDivElement>;
    onSelectCapture?: ReactEventHandler<HTMLDivElement>;
    onStalled?: ReactEventHandler<HTMLDivElement>;
    onStalledCapture?: ReactEventHandler<HTMLDivElement>;
    onSubmit?: FormEventHandler<HTMLDivElement>;
    onSubmitCapture?: FormEventHandler<HTMLDivElement>;
    onSuspend?: ReactEventHandler<HTMLDivElement>;
    onSuspendCapture?: ReactEventHandler<HTMLDivElement>;
    onTimeUpdate?: ReactEventHandler<HTMLDivElement>;
    onTimeUpdateCapture?: ReactEventHandler<HTMLDivElement>;
    onToggle?: ToggleEventHandler<HTMLDivElement>;
    onTouchCancel?: TouchEventHandler<HTMLDivElement>;
    onTouchCancelCapture?: TouchEventHandler<HTMLDivElement>;
    onTouchEnd?: TouchEventHandler<HTMLDivElement>;
    onTouchEndCapture?: TouchEventHandler<HTMLDivElement>;
    onTouchMove?: TouchEventHandler<HTMLDivElement>;
    onTouchMoveCapture?: TouchEventHandler<HTMLDivElement>;
    onTouchStart?: TouchEventHandler<HTMLDivElement>;
    onTouchStartCapture?: TouchEventHandler<HTMLDivElement>;
    onTransitionCancel?: TransitionEventHandler<HTMLDivElement>;
    onTransitionCancelCapture?: TransitionEventHandler<HTMLDivElement>;
    onTransitionEnd?: TransitionEventHandler<HTMLDivElement>;
    onTransitionEndCapture?: TransitionEventHandler<HTMLDivElement>;
    onTransitionRun?: TransitionEventHandler<HTMLDivElement>;
    onTransitionRunCapture?: TransitionEventHandler<HTMLDivElement>;
    onTransitionStart?: TransitionEventHandler<HTMLDivElement>;
    onTransitionStartCapture?: TransitionEventHandler<HTMLDivElement>;
    onVolumeChange?: ReactEventHandler<HTMLDivElement>;
    onVolumeChangeCapture?: ReactEventHandler<HTMLDivElement>;
    onWaiting?: ReactEventHandler<HTMLDivElement>;
    onWaitingCapture?: ReactEventHandler<HTMLDivElement>;
    onWheel?: WheelEventHandler<HTMLDivElement>;
    onWheelCapture?: WheelEventHandler<HTMLDivElement>;
    open?: boolean;
    openOnFocus?: boolean;
    openText?: string;
    PaperComponent?: JSXElementConstructor<HTMLAttributes<HTMLElement>>;
    part?: string;
    popover?: "" | "auto" | "manual";
    popoverTarget?: string;
    popoverTargetAction?: "toggle" | "hide" | "show";
    PopperComponent?: JSXElementConstructor<PopperProps>;
    popupIcon?: ReactNode;
    prefix?: string;
    property?: string;
    radioGroup?: string;
    readOnly?: boolean;
    ref?: Ref<unknown>;
    rel?: string;
    renderGroup?: ((params: AutocompleteRenderGroupParams) => ReactNode);
    renderOption?: ((props: HTMLAttributes<HTMLLIElement> & {
        key: any;
    }, option: ValueOptions, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<ValueOptions, true, false, true, "div">) => ReactNode);
    renderTags?: ((value: ValueOptions[], getTagProps: AutocompleteRenderGetTagProps, ownerState: AutocompleteOwnerState<ValueOptions, true, false, true, "div">) => ReactNode);
    resource?: string;
    results?: number;
    rev?: string;
    role?: AriaRole;
    security?: string;
    selectOnFocus?: boolean;
    size?: OverridableStringUnion<"small" | "medium", AutocompletePropsSizeOverrides>;
    slot?: string;
    slotProps?: {
        clearIndicator?: Partial<IconButtonProps>;
        paper?: PaperProps;
        popper?: Partial<PopperProps>;
        popupIndicator?: Partial<IconButtonProps>;
    };
    spellCheck?: Booleanish;
    style?: CSSProperties;
    suppressContentEditableWarning?: boolean;
    suppressHydrationWarning?: boolean;
    sx?: SxProps<Theme>;
    tabIndex?: number;
    title?: string;
    translate?: "yes" | "no";
    tw?: string;
    type?: "singleSelect";
    typeof?: string;
    unselectable?: "on" | "off";
    unstable_classNamePrefix?: string;
    unstable_isActiveElementInListbox?: ((listbox: RefObject<null | HTMLElement>) => boolean);
    variant?: "filled" | "standard" | "outlined";
    vocab?: string;
}

Hierarchy (view full)

  • Omit<AutocompleteProps<ValueOptions, true, false, true>,
        | "options"
        | "renderInput"
        | "onChange"
        | "value"
        | "id"
        | "filterOptions"
        | "isOptionEqualToValue"
        | "multiple"
        | "color"
        | "getOptionLabel">
  • GridFilterInputValueProps
    • GridFilterInputMultipleSingleSelectProps

Properties

about? accessKey? apiRef applyValue aria-activedescendant? aria-atomic? aria-autocomplete? aria-braillelabel? aria-brailleroledescription? aria-busy? aria-checked? aria-colcount? aria-colindex? aria-colindextext? aria-colspan? aria-controls? aria-current? aria-describedby? aria-description? aria-details? aria-disabled? aria-dropeffect? aria-errormessage? aria-expanded? aria-flowto? aria-grabbed? aria-haspopup? aria-hidden? aria-invalid? aria-keyshortcuts? aria-label? aria-labelledby? aria-level? aria-live? aria-modal? aria-multiline? aria-multiselectable? aria-orientation? aria-owns? aria-placeholder? aria-posinset? aria-pressed? aria-readonly? aria-relevant? aria-required? aria-roledescription? aria-rowcount? aria-rowindex? aria-rowindextext? aria-rowspan? aria-selected? aria-setsize? aria-sort? aria-valuemax? aria-valuemin? aria-valuenow? aria-valuetext? autoCapitalize? autoComplete? autoCorrect? autoFocus? autoHighlight? autoSave? autoSelect? blurOnSelect? ChipProps? classes? className? clearIcon? clearOnBlur? clearOnEscape? clearText? closeText? color? componentName? componentsProps? content? contentEditable? contextMenu? dangerouslySetInnerHTML? datatype? defaultChecked? defaultValue? dir? disableClearable? disableCloseOnSelect? disabled? disabledItemsFocusable? disableListWrap? disablePortal? draggable? enterKeyHint? error? exportparts? filterSelectedOptions? focusElementRef? forcePopupIcon? freeSolo? fullWidth? getLimitTagsText? getOptionDisabled? getOptionKey? groupBy? handleHomeEndKeys? helperText? hidden? includeInputInList? inert? inlist? inputMode? inputValue? is? item itemID? itemProp? itemRef? itemScope? itemType? lang? limitTags? ListboxComponent? ListboxProps? loading? loadingText? nonce? noOptionsText? onAbort? onAbortCapture? onAnimationEnd? onAnimationEndCapture? onAnimationIteration? onAnimationIterationCapture? onAnimationStart? onAnimationStartCapture? onAuxClick? onAuxClickCapture? onBeforeInput? onBeforeInputCapture? onBeforeToggle? onBlur? onBlurCapture? onCanPlay? onCanPlayCapture? onCanPlayThrough? onCanPlayThroughCapture? onChangeCapture? onClick? onClickCapture? onClose? onCompositionEnd? onCompositionEndCapture? onCompositionStart? onCompositionStartCapture? onCompositionUpdate? onCompositionUpdateCapture? onContextMenu? onContextMenuCapture? onCopy? onCopyCapture? onCut? onCutCapture? onDoubleClick? onDoubleClickCapture? onDrag? onDragCapture? onDragEnd? onDragEndCapture? onDragEnter? onDragEnterCapture? onDragExit? onDragExitCapture? onDragLeave? onDragLeaveCapture? onDragOver? onDragOverCapture? onDragStart? onDragStartCapture? onDrop? onDropCapture? onDurationChange? onDurationChangeCapture? onEmptied? onEmptiedCapture? onEncrypted? onEncryptedCapture? onEnded? onEndedCapture? onError? onErrorCapture? onFocus? onFocusCapture? onGotPointerCapture? onGotPointerCaptureCapture? onHighlightChange? onInput? onInputCapture? onInputChange? onInvalid? onInvalidCapture? onKeyDown? onKeyDownCapture? onKeyPress? onKeyPressCapture? onKeyUp? onKeyUpCapture? onLoad? onLoadCapture? onLoadedData? onLoadedDataCapture? onLoadedMetadata? onLoadedMetadataCapture? onLoadStart? onLoadStartCapture? onLostPointerCapture? onLostPointerCaptureCapture? onMouseDown? onMouseDownCapture? onMouseEnter? onMouseLeave? onMouseMove? onMouseMoveCapture? onMouseOut? onMouseOutCapture? onMouseOver? onMouseOverCapture? onMouseUp? onMouseUpCapture? onOpen? onPaste? onPasteCapture? onPause? onPauseCapture? onPlay? onPlayCapture? onPlaying? onPlayingCapture? onPointerCancel? onPointerCancelCapture? onPointerDown? onPointerDownCapture? onPointerEnter? onPointerLeave? onPointerMove? onPointerMoveCapture? onPointerOut? onPointerOutCapture? onPointerOver? onPointerOverCapture? onPointerUp? onPointerUpCapture? onProgress? onProgressCapture? onRateChange? onRateChangeCapture? onReset? onResetCapture? onResize? onResizeCapture? onScroll? onScrollCapture? onSeeked? onSeekedCapture? onSeeking? onSeekingCapture? onSelect? onSelectCapture? onStalled? onStalledCapture? onSubmit? onSubmitCapture? onSuspend? onSuspendCapture? onTimeUpdate? onTimeUpdateCapture? onToggle? onTouchCancel? onTouchCancelCapture? onTouchEnd? onTouchEndCapture? onTouchMove? onTouchMoveCapture? onTouchStart? onTouchStartCapture? onTransitionCancel? onTransitionCancelCapture? onTransitionEnd? onTransitionEndCapture? onTransitionRun? onTransitionRunCapture? onTransitionStart? onTransitionStartCapture? onVolumeChange? onVolumeChangeCapture? onWaiting? onWaitingCapture? onWheel? onWheelCapture? open? openOnFocus? openText? PaperComponent? part? popover? popoverTarget? popoverTargetAction? PopperComponent? popupIcon? prefix? property? radioGroup? readOnly? ref? rel? renderGroup? renderOption? renderTags? resource? results? rev? role? security? selectOnFocus? size? slot? slotProps? spellCheck? style? suppressContentEditableWarning? suppressHydrationWarning? sx? tabIndex? title? translate? tw? type? typeof? unselectable? unstable_classNamePrefix? unstable_isActiveElementInListbox? variant? vocab?

Properties

Optionalabout

about?: string

OptionalaccessKey

accessKey?: string

apiRef

apiRef: MutableRefObject<GridApiCommunity>

applyValue

applyValue: ((value: GridFilterItem) => void)

Optionalaria-activedescendant

aria-activedescendant?: string

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

Optionalaria-atomic

aria-atomic?: Booleanish

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.

Optionalaria-autocomplete

aria-autocomplete?:
    | "none"
    | "list"
    | "both"
    | "inline"

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.

Optionalaria-braillelabel

aria-braillelabel?: string

Defines a string value that labels the current element, which is intended to be converted into Braille.

See

aria-label.

Optionalaria-brailleroledescription

aria-brailleroledescription?: string

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

See

aria-roledescription.

Optionalaria-busy

aria-busy?: Booleanish

Optionalaria-checked

aria-checked?:
    | boolean
    | "true"
    | "mixed"
    | "false"

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

See

  • aria-pressed
  • aria-selected.

Optionalaria-colcount

aria-colcount?: number

Defines the total number of columns in a table, grid, or treegrid.

See

aria-colindex.

Optionalaria-colindex

aria-colindex?: number

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
  • aria-colspan.

Optionalaria-colindextext

aria-colindextext?: string

Defines a human readable text alternative of aria-colindex.

See

aria-rowindextext.

Optionalaria-colspan

aria-colspan?: number

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

See

  • aria-colindex
  • aria-rowspan.

Optionalaria-controls

aria-controls?: string

Identifies the element (or elements) whose contents or presence are controlled by the current element.

See

aria-owns.

Optionalaria-current

aria-current?:
    | boolean
    | "true"
    | "page"
    | "time"
    | "step"
    | "false"
    | "location"
    | "date"

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

Optionalaria-describedby

aria-describedby?: string

Identifies the element (or elements) that describes the object.

See

aria-labelledby

Optionalaria-description

aria-description?: string

Defines a string value that describes or annotates the current element.

See

related aria-describedby.

Optionalaria-details

aria-details?: string

Identifies the element that provides a detailed, extended description for the object.

See

aria-describedby.

Optionalaria-disabled

aria-disabled?: Booleanish

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

See

  • aria-hidden
  • aria-readonly.

Optionalaria-dropeffect

aria-dropeffect?:
    | "link"
    | "none"
    | "copy"
    | "move"
    | "execute"
    | "popup"

Indicates what functions can be performed when a dragged object is released on the drop target.

Deprecated

in ARIA 1.1

Optionalaria-errormessage

aria-errormessage?: string

Identifies the element that provides an error message for the object.

See

  • aria-invalid
  • aria-describedby.

Optionalaria-expanded

aria-expanded?: Booleanish

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

Optionalaria-flowto

aria-flowto?: string

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.

Optionalaria-grabbed

aria-grabbed?: Booleanish

Indicates an element's "grabbed" state in a drag-and-drop operation.

Deprecated

in ARIA 1.1

Optionalaria-haspopup

aria-haspopup?:
    | boolean
    | "menu"
    | "true"
    | "grid"
    | "dialog"
    | "listbox"
    | "false"
    | "tree"

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

Optionalaria-hidden

aria-hidden?: Booleanish

Indicates whether the element is exposed to an accessibility API.

See

aria-disabled.

Optionalaria-invalid

aria-invalid?:
    | boolean
    | "true"
    | "false"
    | "grammar"
    | "spelling"

Indicates the entered value does not conform to the format expected by the application.

See

aria-errormessage.

Optionalaria-keyshortcuts

aria-keyshortcuts?: string

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

Optionalaria-label

aria-label?: string

Defines a string value that labels the current element.

See

aria-labelledby.

Optionalaria-labelledby

aria-labelledby?: string

Identifies the element (or elements) that labels the current element.

See

aria-describedby.

Optionalaria-level

aria-level?: number

Defines the hierarchical level of an element within a structure.

Optionalaria-live

aria-live?: "assertive" | "polite" | "off"

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.

Optionalaria-modal

aria-modal?: Booleanish

Indicates whether an element is modal when displayed.

Optionalaria-multiline

aria-multiline?: Booleanish

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

Optionalaria-multiselectable

aria-multiselectable?: Booleanish

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

Optionalaria-orientation

aria-orientation?: "horizontal" | "vertical"

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

Optionalaria-owns

aria-owns?: string

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.

Optionalaria-placeholder

aria-placeholder?: string

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.

Optionalaria-posinset

aria-posinset?: number

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.

Optionalaria-pressed

aria-pressed?:
    | boolean
    | "true"
    | "mixed"
    | "false"

Indicates the current "pressed" state of toggle buttons.

See

  • aria-checked
  • aria-selected.

Optionalaria-readonly

aria-readonly?: Booleanish

Indicates that the element is not editable, but is otherwise operable.

See

aria-disabled.

Optionalaria-relevant

aria-relevant?:
    | "all"
    | "text"
    | "additions"
    | "additions removals"
    | "additions text"
    | "removals"
    | "removals additions"
    | "removals text"
    | "text additions"
    | "text removals"

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

See

aria-atomic.

Optionalaria-required

aria-required?: Booleanish

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

Optionalaria-roledescription

aria-roledescription?: string

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

Optionalaria-rowcount

aria-rowcount?: number

Defines the total number of rows in a table, grid, or treegrid.

See

aria-rowindex.

Optionalaria-rowindex

aria-rowindex?: number

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
  • aria-rowspan.

Optionalaria-rowindextext

aria-rowindextext?: string

Defines a human readable text alternative of aria-rowindex.

See

aria-colindextext.

Optionalaria-rowspan

aria-rowspan?: number

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

See

  • aria-rowindex
  • aria-colspan.

Optionalaria-selected

aria-selected?: Booleanish

Indicates the current "selected" state of various widgets.

See

  • aria-checked
  • aria-pressed.

Optionalaria-setsize

aria-setsize?: number

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.

Optionalaria-sort

aria-sort?:
    | "none"
    | "other"
    | "ascending"
    | "descending"

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

Optionalaria-valuemax

aria-valuemax?: number

Defines the maximum allowed value for a range widget.

Optionalaria-valuemin

aria-valuemin?: number

Defines the minimum allowed value for a range widget.

Optionalaria-valuenow

aria-valuenow?: number

Defines the current value for a range widget.

See

aria-valuetext.

Optionalaria-valuetext

aria-valuetext?: string

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

OptionalautoCapitalize

autoCapitalize?:
    | string & {}
    | "none"
    | "on"
    | "off"
    | "sentences"
    | "words"
    | "characters"

OptionalautoComplete

autoComplete?: boolean

If true, the portion of the selected suggestion that the user hasn't typed, 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.

Default

false

OptionalautoCorrect

autoCorrect?: string

OptionalautoFocus

autoFocus?: boolean

OptionalautoHighlight

autoHighlight?: boolean

If true, the first option is automatically highlighted.

Default

false

OptionalautoSave

autoSave?: string

OptionalautoSelect

autoSelect?: boolean

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.

When using the freeSolo mode, the typed value will be the input value if the Autocomplete loses focus without highlighting an option.

Default

false

OptionalblurOnSelect

blurOnSelect?: boolean | "touch" | "mouse"

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.

Default

false

OptionalChipProps

ChipProps?: ChipProps<"div">

Props applied to the Chip element.

Optionalclasses

classes?: Partial<AutocompleteClasses>

Override or extend the styles applied to the component.

OptionalclassName

className?: string

OptionalclearIcon

clearIcon?: ReactNode

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

Default

<ClearIcon fontSize="small" />

OptionalclearOnBlur

clearOnBlur?: boolean

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

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

Default

!props.freeSolo

OptionalclearOnEscape

clearOnEscape?: boolean

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

Default

false

OptionalclearText

clearText?: string

Override the default text for the clear icon button.

For localization purposes, you can use the provided translations.

Default

'Clear'

OptionalcloseText

closeText?: string

Override the default text for the close popup icon button.

For localization purposes, you can use the provided translations.

Default

'Close'

Optionalcolor

color?: OverridableStringUnion<
    | "error"
    | "warning"
    | "success"
    | "primary"
    | "secondary"
    | "info", TextFieldPropsColorOverrides>

The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.

Default

'primary'

OptionalcomponentName

componentName?: string

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

OptionalcomponentsProps

componentsProps?: {
    clearIndicator?: Partial<IconButtonProps>;
    paper?: PaperProps;
    popper?: Partial<PopperProps>;
    popupIndicator?: Partial<IconButtonProps>;
}

The props used for each slot inside.

Default

{}

Optionalcontent

content?: string

OptionalcontentEditable

contentEditable?: "inherit" | Booleanish | "plaintext-only"

OptionalcontextMenu

contextMenu?: string

OptionaldangerouslySetInnerHTML

dangerouslySetInnerHTML?: {
    __html: string | TrustedHTML;
}

Optionaldatatype

datatype?: string

OptionaldefaultChecked

defaultChecked?: boolean

OptionaldefaultValue

defaultValue?: ValueOptions[]

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

Default

props.multiple ? [] : null

Optionaldir

dir?: string

OptionaldisableClearable

disableClearable

If true, the input can't be cleared.

Default

false

OptionaldisableCloseOnSelect

disableCloseOnSelect?: boolean

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

Default

false

Optionaldisabled

disabled?: boolean

If true, the component is disabled.

Default

false

OptionaldisabledItemsFocusable

disabledItemsFocusable?: boolean

If true, will allow focus on disabled items.

Default

false

OptionaldisableListWrap

disableListWrap?: boolean

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

Default

false

OptionaldisablePortal

disablePortal?: boolean

If true, the Popper content will be under the DOM hierarchy of the parent component.

Default

false

Optionaldraggable

draggable?: Booleanish

OptionalenterKeyHint

enterKeyHint?:
    | "search"
    | "next"
    | "done"
    | "enter"
    | "go"
    | "previous"
    | "send"

Optionalerror

error?: boolean

If true, the label is displayed in an error state.

Default

false

Optionalexportparts

exportparts?: string

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts

OptionalfilterSelectedOptions

filterSelectedOptions?: boolean

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

Default

false

OptionalfocusElementRef

focusElementRef?: Ref<any>

OptionalforcePopupIcon

forcePopupIcon?: boolean | "auto"

Force the visibility display of the popup icon.

Default

'auto'

OptionalfreeSolo

freeSolo

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

Default

false

OptionalfullWidth

fullWidth?: boolean

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

Default

false

OptionalgetLimitTagsText

getLimitTagsText?: ((more: number) => ReactNode)

The label to display when the tags are truncated (limitTags).

Type declaration

    • (more): ReactNode

    • Parameters

      • more: number

        The number of truncated tags.

      Returns ReactNode

Default

(more) => +${more}

OptionalgetOptionDisabled

getOptionDisabled?: ((option: ValueOptions) => boolean)

Used to determine the disabled state for a given option.

Type declaration

    • (option): boolean

    • Parameters

      Returns boolean

OptionalgetOptionKey

getOptionKey?: ((option: ValueOptions) => string | number)

Used to determine the key for a given option. This can be useful when the labels of options are not unique (since labels are used as keys by default).

Type declaration

    • (option): string | number

    • Parameters

      Returns string | number

OptionalgroupBy

groupBy?: ((option: ValueOptions) => string)

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.

Type declaration

    • (option): string

    • Parameters

      Returns string

OptionalhandleHomeEndKeys

handleHomeEndKeys?: boolean

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.

Default

!props.freeSolo

OptionalhelperText

helperText?: ReactNode

The helper text content.

Optionalhidden

hidden?: boolean

OptionalincludeInputInList

includeInputInList?: boolean

If true, the highlight can move to the input.

Default

false

Optionalinert

inert?: boolean

See

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

Optionalinlist

inlist?: any

OptionalinputMode

inputMode?:
    | "search"
    | "none"
    | "url"
    | "text"
    | "tel"
    | "email"
    | "numeric"
    | "decimal"

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

OptionalinputValue

inputValue?: string

The input value.

Optionalis

is?: string

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

item

item: GridFilterItem

OptionalitemID

itemID?: string

OptionalitemProp

itemProp?: string

OptionalitemRef

itemRef?: string

OptionalitemScope

itemScope?: boolean

OptionalitemType

itemType?: string

Optionallang

lang?: string

OptionallimitTags

limitTags?: number

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

Default

-1

OptionalListboxComponent

ListboxComponent?: JSXElementConstructor<HTMLAttributes<HTMLElement>>

The component used to render the listbox.

Default

'ul'

OptionalListboxProps

ListboxProps?: HTMLAttributes<HTMLUListElement> & {
    ref?: Ref<Element>;
    sx?: SxProps<Theme>;
}

Props applied to the Listbox element.

Optionalloading

loading?: boolean

If true, the component is in a loading state. This shows the loadingText in place of suggestions (only if there are no suggestions to show, for example options are empty).

Default

false

OptionalloadingText

loadingText?: ReactNode

Text to display when in a loading state.

For localization purposes, you can use the provided translations.

Default

'Loading…'

Optionalnonce

nonce?: string

OptionalnoOptionsText

noOptionsText?: ReactNode

Text to display when there are no options.

For localization purposes, you can use the provided translations.

Default

'No options'

OptionalonAbort

onAbort?: ReactEventHandler<HTMLDivElement>

OptionalonAbortCapture

onAbortCapture?: ReactEventHandler<HTMLDivElement>

OptionalonAnimationEnd

onAnimationEnd?: AnimationEventHandler<HTMLDivElement>

OptionalonAnimationEndCapture

onAnimationEndCapture?: AnimationEventHandler<HTMLDivElement>

OptionalonAnimationIteration

onAnimationIteration?: AnimationEventHandler<HTMLDivElement>

OptionalonAnimationIterationCapture

onAnimationIterationCapture?: AnimationEventHandler<HTMLDivElement>

OptionalonAnimationStart

onAnimationStart?: AnimationEventHandler<HTMLDivElement>

OptionalonAnimationStartCapture

onAnimationStartCapture?: AnimationEventHandler<HTMLDivElement>

OptionalonAuxClick

onAuxClick?: MouseEventHandler<HTMLDivElement>

OptionalonAuxClickCapture

onAuxClickCapture?: MouseEventHandler<HTMLDivElement>

OptionalonBeforeInput

onBeforeInput?: FormEventHandler<HTMLDivElement>

OptionalonBeforeInputCapture

onBeforeInputCapture?: FormEventHandler<HTMLDivElement>

OptionalonBeforeToggle

onBeforeToggle?: ToggleEventHandler<HTMLDivElement>

OptionalonBlur

onBlur?: FocusEventHandler<HTMLDivElement>

OptionalonBlurCapture

onBlurCapture?: FocusEventHandler<HTMLDivElement>

OptionalonCanPlay

onCanPlay?: ReactEventHandler<HTMLDivElement>

OptionalonCanPlayCapture

onCanPlayCapture?: ReactEventHandler<HTMLDivElement>

OptionalonCanPlayThrough

onCanPlayThrough?: ReactEventHandler<HTMLDivElement>

OptionalonCanPlayThroughCapture

onCanPlayThroughCapture?: ReactEventHandler<HTMLDivElement>

OptionalonChangeCapture

onChangeCapture?: FormEventHandler<HTMLDivElement>

OptionalonClick

onClick?: MouseEventHandler<HTMLDivElement>

OptionalonClickCapture

onClickCapture?: MouseEventHandler<HTMLDivElement>

OptionalonClose

onClose?: ((event: SyntheticEvent<Element, Event>, reason: AutocompleteCloseReason) => void)

Callback fired when the popup requests to be closed. Use in controlled mode (see open).

Type declaration

    • (event, reason): void

    • Parameters

      • event: SyntheticEvent<Element, Event>

        The event source of the callback.

      • reason: AutocompleteCloseReason

        Can be: "toggleInput", "escape", "selectOption", "removeOption", "blur".

      Returns void

OptionalonCompositionEnd

onCompositionEnd?: CompositionEventHandler<HTMLDivElement>

OptionalonCompositionEndCapture

onCompositionEndCapture?: CompositionEventHandler<HTMLDivElement>

OptionalonCompositionStart

onCompositionStart?: CompositionEventHandler<HTMLDivElement>

OptionalonCompositionStartCapture

onCompositionStartCapture?: CompositionEventHandler<HTMLDivElement>

OptionalonCompositionUpdate

onCompositionUpdate?: CompositionEventHandler<HTMLDivElement>

OptionalonCompositionUpdateCapture

onCompositionUpdateCapture?: CompositionEventHandler<HTMLDivElement>

OptionalonContextMenu

onContextMenu?: MouseEventHandler<HTMLDivElement>

OptionalonContextMenuCapture

onContextMenuCapture?: MouseEventHandler<HTMLDivElement>

OptionalonCopy

onCopy?: ClipboardEventHandler<HTMLDivElement>

OptionalonCopyCapture

onCopyCapture?: ClipboardEventHandler<HTMLDivElement>

OptionalonCut

onCut?: ClipboardEventHandler<HTMLDivElement>

OptionalonCutCapture

onCutCapture?: ClipboardEventHandler<HTMLDivElement>

OptionalonDoubleClick

onDoubleClick?: MouseEventHandler<HTMLDivElement>

OptionalonDoubleClickCapture

onDoubleClickCapture?: MouseEventHandler<HTMLDivElement>

OptionalonDrag

onDrag?: DragEventHandler<HTMLDivElement>

OptionalonDragCapture

onDragCapture?: DragEventHandler<HTMLDivElement>

OptionalonDragEnd

onDragEnd?: DragEventHandler<HTMLDivElement>

OptionalonDragEndCapture

onDragEndCapture?: DragEventHandler<HTMLDivElement>

OptionalonDragEnter

onDragEnter?: DragEventHandler<HTMLDivElement>

OptionalonDragEnterCapture

onDragEnterCapture?: DragEventHandler<HTMLDivElement>

OptionalonDragExit

onDragExit?: DragEventHandler<HTMLDivElement>

OptionalonDragExitCapture

onDragExitCapture?: DragEventHandler<HTMLDivElement>

OptionalonDragLeave

onDragLeave?: DragEventHandler<HTMLDivElement>

OptionalonDragLeaveCapture

onDragLeaveCapture?: DragEventHandler<HTMLDivElement>

OptionalonDragOver

onDragOver?: DragEventHandler<HTMLDivElement>

OptionalonDragOverCapture

onDragOverCapture?: DragEventHandler<HTMLDivElement>

OptionalonDragStart

onDragStart?: DragEventHandler<HTMLDivElement>

OptionalonDragStartCapture

onDragStartCapture?: DragEventHandler<HTMLDivElement>

OptionalonDrop

onDrop?: DragEventHandler<HTMLDivElement>

OptionalonDropCapture

onDropCapture?: DragEventHandler<HTMLDivElement>

OptionalonDurationChange

onDurationChange?: ReactEventHandler<HTMLDivElement>

OptionalonDurationChangeCapture

onDurationChangeCapture?: ReactEventHandler<HTMLDivElement>

OptionalonEmptied

onEmptied?: ReactEventHandler<HTMLDivElement>

OptionalonEmptiedCapture

onEmptiedCapture?: ReactEventHandler<HTMLDivElement>

OptionalonEncrypted

onEncrypted?: ReactEventHandler<HTMLDivElement>

OptionalonEncryptedCapture

onEncryptedCapture?: ReactEventHandler<HTMLDivElement>

OptionalonEnded

onEnded?: ReactEventHandler<HTMLDivElement>

OptionalonEndedCapture

onEndedCapture?: ReactEventHandler<HTMLDivElement>

OptionalonError

onError?: ReactEventHandler<HTMLDivElement>

OptionalonErrorCapture

onErrorCapture?: ReactEventHandler<HTMLDivElement>

OptionalonFocus

onFocus?: FocusEventHandler<HTMLDivElement>

OptionalonFocusCapture

onFocusCapture?: FocusEventHandler<HTMLDivElement>

OptionalonGotPointerCapture

onGotPointerCapture?: PointerEventHandler<HTMLDivElement>

OptionalonGotPointerCaptureCapture

onGotPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>

OptionalonHighlightChange

onHighlightChange?: ((event: SyntheticEvent<Element, Event>, option: null | ValueOptions, reason: AutocompleteHighlightChangeReason) => void)

Callback fired when the highlight option changes.

Type declaration

    • (event, option, reason): void

    • Parameters

      • event: SyntheticEvent<Element, Event>

        The event source of the callback.

      • option: null | ValueOptions

        The highlighted option.

      • reason: AutocompleteHighlightChangeReason

        Can be: "keyboard", "auto", "mouse", "touch".

      Returns void

OptionalonInput

onInput?: FormEventHandler<HTMLDivElement>

OptionalonInputCapture

onInputCapture?: FormEventHandler<HTMLDivElement>

OptionalonInputChange

onInputChange?: ((event: SyntheticEvent<Element, Event>, value: string, reason: AutocompleteInputChangeReason) => void)

Callback fired when the input value changes.

Type declaration

    • (event, value, reason): void

    • Parameters

      • event: SyntheticEvent<Element, Event>

        The event source of the callback.

      • value: string

        The new value of the text input.

      • reason: AutocompleteInputChangeReason

        Can be: "input" (user input), "reset" (programmatic change), "clear".

      Returns void

OptionalonInvalid

onInvalid?: FormEventHandler<HTMLDivElement>

OptionalonInvalidCapture

onInvalidCapture?: FormEventHandler<HTMLDivElement>

OptionalonKeyDown

onKeyDown?: ((event: KeyboardEvent<HTMLDivElement> & {
    defaultMuiPrevented?: boolean;
}) => void)

OptionalonKeyDownCapture

onKeyDownCapture?: KeyboardEventHandler<HTMLDivElement>

OptionalonKeyPress

onKeyPress?: KeyboardEventHandler<HTMLDivElement>

Deprecated

Use onKeyUp or onKeyDown instead

OptionalonKeyPressCapture

onKeyPressCapture?: KeyboardEventHandler<HTMLDivElement>

Deprecated

Use onKeyUpCapture or onKeyDownCapture instead

OptionalonKeyUp

onKeyUp?: KeyboardEventHandler<HTMLDivElement>

OptionalonKeyUpCapture

onKeyUpCapture?: KeyboardEventHandler<HTMLDivElement>

OptionalonLoad

onLoad?: ReactEventHandler<HTMLDivElement>

OptionalonLoadCapture

onLoadCapture?: ReactEventHandler<HTMLDivElement>

OptionalonLoadedData

onLoadedData?: ReactEventHandler<HTMLDivElement>

OptionalonLoadedDataCapture

onLoadedDataCapture?: ReactEventHandler<HTMLDivElement>

OptionalonLoadedMetadata

onLoadedMetadata?: ReactEventHandler<HTMLDivElement>

OptionalonLoadedMetadataCapture

onLoadedMetadataCapture?: ReactEventHandler<HTMLDivElement>

OptionalonLoadStart

onLoadStart?: ReactEventHandler<HTMLDivElement>

OptionalonLoadStartCapture

onLoadStartCapture?: ReactEventHandler<HTMLDivElement>

OptionalonLostPointerCapture

onLostPointerCapture?: PointerEventHandler<HTMLDivElement>

OptionalonLostPointerCaptureCapture

onLostPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>

OptionalonMouseDown

onMouseDown?: MouseEventHandler<HTMLDivElement>

OptionalonMouseDownCapture

onMouseDownCapture?: MouseEventHandler<HTMLDivElement>

OptionalonMouseEnter

onMouseEnter?: MouseEventHandler<HTMLDivElement>

OptionalonMouseLeave

onMouseLeave?: MouseEventHandler<HTMLDivElement>

OptionalonMouseMove

onMouseMove?: MouseEventHandler<HTMLDivElement>

OptionalonMouseMoveCapture

onMouseMoveCapture?: MouseEventHandler<HTMLDivElement>

OptionalonMouseOut

onMouseOut?: MouseEventHandler<HTMLDivElement>

OptionalonMouseOutCapture

onMouseOutCapture?: MouseEventHandler<HTMLDivElement>

OptionalonMouseOver

onMouseOver?: MouseEventHandler<HTMLDivElement>

OptionalonMouseOverCapture

onMouseOverCapture?: MouseEventHandler<HTMLDivElement>

OptionalonMouseUp

onMouseUp?: MouseEventHandler<HTMLDivElement>

OptionalonMouseUpCapture

onMouseUpCapture?: MouseEventHandler<HTMLDivElement>

OptionalonOpen

onOpen?: ((event: SyntheticEvent<Element, Event>) => void)

Callback fired when the popup requests to be opened. Use in controlled mode (see open).

Type declaration

    • (event): void

    • Parameters

      • event: SyntheticEvent<Element, Event>

        The event source of the callback.

      Returns void

OptionalonPaste

onPaste?: ClipboardEventHandler<HTMLDivElement>

OptionalonPasteCapture

onPasteCapture?: ClipboardEventHandler<HTMLDivElement>

OptionalonPause

onPause?: ReactEventHandler<HTMLDivElement>

OptionalonPauseCapture

onPauseCapture?: ReactEventHandler<HTMLDivElement>

OptionalonPlay

onPlay?: ReactEventHandler<HTMLDivElement>

OptionalonPlayCapture

onPlayCapture?: ReactEventHandler<HTMLDivElement>

OptionalonPlaying

onPlaying?: ReactEventHandler<HTMLDivElement>

OptionalonPlayingCapture

onPlayingCapture?: ReactEventHandler<HTMLDivElement>

OptionalonPointerCancel

onPointerCancel?: PointerEventHandler<HTMLDivElement>

OptionalonPointerCancelCapture

onPointerCancelCapture?: PointerEventHandler<HTMLDivElement>

OptionalonPointerDown

onPointerDown?: PointerEventHandler<HTMLDivElement>

OptionalonPointerDownCapture

onPointerDownCapture?: PointerEventHandler<HTMLDivElement>

OptionalonPointerEnter

onPointerEnter?: PointerEventHandler<HTMLDivElement>

OptionalonPointerLeave

onPointerLeave?: PointerEventHandler<HTMLDivElement>

OptionalonPointerMove

onPointerMove?: PointerEventHandler<HTMLDivElement>

OptionalonPointerMoveCapture

onPointerMoveCapture?: PointerEventHandler<HTMLDivElement>

OptionalonPointerOut

onPointerOut?: PointerEventHandler<HTMLDivElement>

OptionalonPointerOutCapture

onPointerOutCapture?: PointerEventHandler<HTMLDivElement>

OptionalonPointerOver

onPointerOver?: PointerEventHandler<HTMLDivElement>

OptionalonPointerOverCapture

onPointerOverCapture?: PointerEventHandler<HTMLDivElement>

OptionalonPointerUp

onPointerUp?: PointerEventHandler<HTMLDivElement>

OptionalonPointerUpCapture

onPointerUpCapture?: PointerEventHandler<HTMLDivElement>

OptionalonProgress

onProgress?: ReactEventHandler<HTMLDivElement>

OptionalonProgressCapture

onProgressCapture?: ReactEventHandler<HTMLDivElement>

OptionalonRateChange

onRateChange?: ReactEventHandler<HTMLDivElement>

OptionalonRateChangeCapture

onRateChangeCapture?: ReactEventHandler<HTMLDivElement>

OptionalonReset

onReset?: FormEventHandler<HTMLDivElement>

OptionalonResetCapture

onResetCapture?: FormEventHandler<HTMLDivElement>

OptionalonResize

onResize?: ReactEventHandler<HTMLDivElement>

OptionalonResizeCapture

onResizeCapture?: ReactEventHandler<HTMLDivElement>

OptionalonScroll

onScroll?: UIEventHandler<HTMLDivElement>

OptionalonScrollCapture

onScrollCapture?: UIEventHandler<HTMLDivElement>

OptionalonSeeked

onSeeked?: ReactEventHandler<HTMLDivElement>

OptionalonSeekedCapture

onSeekedCapture?: ReactEventHandler<HTMLDivElement>

OptionalonSeeking

onSeeking?: ReactEventHandler<HTMLDivElement>

OptionalonSeekingCapture

onSeekingCapture?: ReactEventHandler<HTMLDivElement>

OptionalonSelect

onSelect?: ReactEventHandler<HTMLDivElement>

OptionalonSelectCapture

onSelectCapture?: ReactEventHandler<HTMLDivElement>

OptionalonStalled

onStalled?: ReactEventHandler<HTMLDivElement>

OptionalonStalledCapture

onStalledCapture?: ReactEventHandler<HTMLDivElement>

OptionalonSubmit

onSubmit?: FormEventHandler<HTMLDivElement>

OptionalonSubmitCapture

onSubmitCapture?: FormEventHandler<HTMLDivElement>

OptionalonSuspend

onSuspend?: ReactEventHandler<HTMLDivElement>

OptionalonSuspendCapture

onSuspendCapture?: ReactEventHandler<HTMLDivElement>

OptionalonTimeUpdate

onTimeUpdate?: ReactEventHandler<HTMLDivElement>

OptionalonTimeUpdateCapture

onTimeUpdateCapture?: ReactEventHandler<HTMLDivElement>

OptionalonToggle

onToggle?: ToggleEventHandler<HTMLDivElement>

OptionalonTouchCancel

onTouchCancel?: TouchEventHandler<HTMLDivElement>

OptionalonTouchCancelCapture

onTouchCancelCapture?: TouchEventHandler<HTMLDivElement>

OptionalonTouchEnd

onTouchEnd?: TouchEventHandler<HTMLDivElement>

OptionalonTouchEndCapture

onTouchEndCapture?: TouchEventHandler<HTMLDivElement>

OptionalonTouchMove

onTouchMove?: TouchEventHandler<HTMLDivElement>

OptionalonTouchMoveCapture

onTouchMoveCapture?: TouchEventHandler<HTMLDivElement>

OptionalonTouchStart

onTouchStart?: TouchEventHandler<HTMLDivElement>

OptionalonTouchStartCapture

onTouchStartCapture?: TouchEventHandler<HTMLDivElement>

OptionalonTransitionCancel

onTransitionCancel?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionCancelCapture

onTransitionCancelCapture?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionEnd

onTransitionEnd?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionEndCapture

onTransitionEndCapture?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionRun

onTransitionRun?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionRunCapture

onTransitionRunCapture?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionStart

onTransitionStart?: TransitionEventHandler<HTMLDivElement>

OptionalonTransitionStartCapture

onTransitionStartCapture?: TransitionEventHandler<HTMLDivElement>

OptionalonVolumeChange

onVolumeChange?: ReactEventHandler<HTMLDivElement>

OptionalonVolumeChangeCapture

onVolumeChangeCapture?: ReactEventHandler<HTMLDivElement>

OptionalonWaiting

onWaiting?: ReactEventHandler<HTMLDivElement>

OptionalonWaitingCapture

onWaitingCapture?: ReactEventHandler<HTMLDivElement>

OptionalonWheel

onWheel?: WheelEventHandler<HTMLDivElement>

OptionalonWheelCapture

onWheelCapture?: WheelEventHandler<HTMLDivElement>

Optionalopen

open?: boolean

If true, the component is shown.

OptionalopenOnFocus

openOnFocus?: boolean

If true, the popup will open on input focus.

Default

false

OptionalopenText

openText?: string

Override the default text for the open popup icon button.

For localization purposes, you can use the provided translations.

Default

'Open'

OptionalPaperComponent

PaperComponent?: JSXElementConstructor<HTMLAttributes<HTMLElement>>

The component used to render the body of the popup.

Default

Paper

Optionalpart

part?: string

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part

Optionalpopover

popover?: "" | "auto" | "manual"

OptionalpopoverTarget

popoverTarget?: string

OptionalpopoverTargetAction

popoverTargetAction?: "toggle" | "hide" | "show"

OptionalPopperComponent

PopperComponent?: JSXElementConstructor<PopperProps>

The component used to position the popup.

Default

Popper

OptionalpopupIcon

popupIcon?: ReactNode

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

Default

<ArrowDropDownIcon />

Optionalprefix

prefix?: string

Optionalproperty

property?: string

OptionalradioGroup

radioGroup?: string

OptionalreadOnly

readOnly?: boolean

If true, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.

Default

false

Optionalref

ref?: Ref<unknown>

Optionalrel

rel?: string

OptionalrenderGroup

renderGroup?: ((params: AutocompleteRenderGroupParams) => ReactNode)

Render the group.

Type declaration

    • (params): ReactNode

    • Parameters

      • params: AutocompleteRenderGroupParams

        The group to render.

      Returns ReactNode

OptionalrenderOption

renderOption?: ((props: HTMLAttributes<HTMLLIElement> & {
    key: any;
}, option: ValueOptions, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<ValueOptions, true, false, true, "div">) => ReactNode)

Render the option, use getOptionLabel by default.

Type declaration

    • (props, option, state, ownerState): ReactNode

    • Parameters

      • props: HTMLAttributes<HTMLLIElement> & {
            key: any;
        }

        The props to apply on the li element.

      • option: ValueOptions

        The option to render.

      • state: AutocompleteRenderOptionState

        The state of each option.

      • ownerState: AutocompleteOwnerState<ValueOptions, true, false, true, "div">

        The state of the Autocomplete component.

      Returns ReactNode

OptionalrenderTags

renderTags?: ((value: ValueOptions[], getTagProps: AutocompleteRenderGetTagProps, ownerState: AutocompleteOwnerState<ValueOptions, true, false, true, "div">) => ReactNode)

Render the selected value.

Type declaration

    • (value, getTagProps, ownerState): ReactNode

    • Parameters

      • value: ValueOptions[]

        The value provided to the component.

      • getTagProps: AutocompleteRenderGetTagProps

        A tag props getter.

      • ownerState: AutocompleteOwnerState<ValueOptions, true, false, true, "div">

        The state of the Autocomplete component.

      Returns ReactNode

Optionalresource

resource?: string

Optionalresults

results?: number

Optionalrev

rev?: string

Optionalrole

role?: AriaRole

Optionalsecurity

security?: string

OptionalselectOnFocus

selectOnFocus?: boolean

If true, the input's text is selected on focus. It helps the user clear the selected value.

Default

!props.freeSolo

Optionalsize

size?: OverridableStringUnion<"small" | "medium", AutocompletePropsSizeOverrides>

The size of the component.

Default

'medium'

Optionalslot

slot?: string

OptionalslotProps

slotProps?: {
    clearIndicator?: Partial<IconButtonProps>;
    paper?: PaperProps;
    popper?: Partial<PopperProps>;
    popupIndicator?: Partial<IconButtonProps>;
}

The props used for each slot inside.

Default

{}

OptionalspellCheck

spellCheck?: Booleanish

Optionalstyle

style?: CSSProperties

OptionalsuppressContentEditableWarning

suppressContentEditableWarning?: boolean

OptionalsuppressHydrationWarning

suppressHydrationWarning?: boolean

Optionalsx

sx?: SxProps<Theme>

The system prop that allows defining system overrides as well as additional CSS styles.

OptionaltabIndex

tabIndex?: number

Optionaltitle

title?: string

Optionaltranslate

translate?: "yes" | "no"

Optionaltw

tw?: string

Specify styles using Tailwind CSS classes. This feature is currently experimental. If style prop is also specified, styles generated with tw prop will be overridden.

Example:

  • tw='w-full h-full bg-blue-200'
  • tw='text-9xl'
  • tw='text-[80px]'

Optionaltype

type

Optionaltypeof

typeof?: string

Optionalunselectable

unselectable?: "on" | "off"

Optional Internalunstable_classNamePrefix

unstable_classNamePrefix?: string

The prefix of the state class name, temporary for Joy UI

Default

'Mui'

Optional Internalunstable_isActiveElementInListbox

unstable_isActiveElementInListbox?: ((listbox: RefObject<null | HTMLElement>) => boolean)

Temporary for Joy UI because the parent listbox is the document object TODO v6: Normalize the logic and remove this param.

Optionalvariant

variant?: "filled" | "standard" | "outlined"

The variant to use.

Default

'outlined'

Optionalvocab

vocab?: string

Settings

Member Visibility

On This Page

Properties
aboutaccessKeyapiRefapplyValuearia-activedescendantaria-atomicaria-autocompletearia-braillelabelaria-brailleroledescriptionaria-busyaria-checkedaria-colcountaria-colindexaria-colindextextaria-colspanaria-controlsaria-currentaria-describedbyaria-descriptionaria-detailsaria-disabledaria-dropeffectaria-errormessagearia-expandedaria-flowtoaria-grabbedaria-haspopuparia-hiddenaria-invalidaria-keyshortcutsaria-labelaria-labelledbyaria-levelaria-livearia-modalaria-multilinearia-multiselectablearia-orientationaria-ownsaria-placeholderaria-posinsetaria-pressedaria-readonlyaria-relevantaria-requiredaria-roledescriptionaria-rowcountaria-rowindexaria-rowindextextaria-rowspanaria-selectedaria-setsizearia-sortaria-valuemaxaria-valueminaria-valuenowaria-valuetextautoCapitalizeautoCompleteautoCorrectautoFocusautoHighlightautoSaveautoSelectblurOnSelectChipPropsclassesclassNameclearIconclearOnBlurclearOnEscapeclearTextcloseTextcolorcomponentNamecomponentsPropscontentcontentEditablecontextMenudangerouslySetInnerHTMLdatatypedefaultCheckeddefaultValuedirdisableClearabledisableCloseOnSelectdisableddisabledItemsFocusabledisableListWrapdisablePortaldraggableenterKeyHinterrorexportpartsfilterSelectedOptionsfocusElementRefforcePopupIconfreeSolofullWidthgetLimitTagsTextgetOptionDisabledgetOptionKeygroupByhandleHomeEndKeyshelperTexthiddenincludeInputInListinertinlistinputModeinputValueisitemitemIDitemPropitemRefitemScopeitemTypelanglimitTagsListboxComponentListboxPropsloadingloadingTextnoncenoOptionsTextonAbortonAbortCaptureonAnimationEndonAnimationEndCaptureonAnimationIterationonAnimationIterationCaptureonAnimationStartonAnimationStartCaptureonAuxClickonAuxClickCaptureonBeforeInputonBeforeInputCaptureonBeforeToggleonBluronBlurCaptureonCanPlayonCanPlayCaptureonCanPlayThroughonCanPlayThroughCaptureonChangeCaptureonClickonClickCaptureonCloseonCompositionEndonCompositionEndCaptureonCompositionStartonCompositionStartCaptureonCompositionUpdateonCompositionUpdateCaptureonContextMenuonContextMenuCaptureonCopyonCopyCaptureonCutonCutCaptureonDoubleClickonDoubleClickCaptureonDragonDragCaptureonDragEndonDragEndCaptureonDragEnteronDragEnterCaptureonDragExitonDragExitCaptureonDragLeaveonDragLeaveCaptureonDragOveronDragOverCaptureonDragStartonDragStartCaptureonDroponDropCaptureonDurationChangeonDurationChangeCaptureonEmptiedonEmptiedCaptureonEncryptedonEncryptedCaptureonEndedonEndedCaptureonErroronErrorCaptureonFocusonFocusCaptureonGotPointerCaptureonGotPointerCaptureCaptureonHighlightChangeonInputonInputCaptureonInputChangeonInvalidonInvalidCaptureonKeyDownonKeyDownCaptureonKeyPressonKeyPressCaptureonKeyUponKeyUpCaptureonLoadonLoadCaptureonLoadedDataonLoadedDataCaptureonLoadedMetadataonLoadedMetadataCaptureonLoadStartonLoadStartCaptureonLostPointerCaptureonLostPointerCaptureCaptureonMouseDownonMouseDownCaptureonMouseEnteronMouseLeaveonMouseMoveonMouseMoveCaptureonMouseOutonMouseOutCaptureonMouseOveronMouseOverCaptureonMouseUponMouseUpCaptureonOpenonPasteonPasteCaptureonPauseonPauseCaptureonPlayonPlayCaptureonPlayingonPlayingCaptureonPointerCancelonPointerCancelCaptureonPointerDownonPointerDownCaptureonPointerEnteronPointerLeaveonPointerMoveonPointerMoveCaptureonPointerOutonPointerOutCaptureonPointerOveronPointerOverCaptureonPointerUponPointerUpCaptureonProgressonProgressCaptureonRateChangeonRateChangeCaptureonResetonResetCaptureonResizeonResizeCaptureonScrollonScrollCaptureonSeekedonSeekedCaptureonSeekingonSeekingCaptureonSelectonSelectCaptureonStalledonStalledCaptureonSubmitonSubmitCaptureonSuspendonSuspendCaptureonTimeUpdateonTimeUpdateCaptureonToggleonTouchCancelonTouchCancelCaptureonTouchEndonTouchEndCaptureonTouchMoveonTouchMoveCaptureonTouchStartonTouchStartCaptureonTransitionCancelonTransitionCancelCaptureonTransitionEndonTransitionEndCaptureonTransitionRunonTransitionRunCaptureonTransitionStartonTransitionStartCaptureonVolumeChangeonVolumeChangeCaptureonWaitingonWaitingCaptureonWheelonWheelCaptureopenopenOnFocusopenTextPaperComponentpartpopoverpopoverTargetpopoverTargetActionPopperComponentpopupIconprefixpropertyradioGroupreadOnlyrefrelrenderGrouprenderOptionrenderTagsresourceresultsrevrolesecurityselectOnFocussizeslotslotPropsspellCheckstylesuppressContentEditableWarningsuppressHydrationWarningsxtabIndextitletranslatetwtypetypeofunselectableunstable_classNamePrefixunstable_isActiveElementInListboxvariantvocab