@mantine/core/lib/components/MultiSelect/MultiSelect.d.ts

React components library focused on usability, accessibility and developer experience

import { BoxProps, ElementProps, Factory, MantineColor, Primitive, StylesApiProps } from '../../core';
import { ComboboxItem, ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames, ComboboxRenderPillInput } from '../Combobox';
import { __BaseInputProps, __InputStylesNames, ClearSectionMode, InputClearButtonProps } from '../Input';
import { ScrollAreaProps } from '../ScrollArea';
export type MultiSelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
export interface MultiSelectProps<Value extends Primitive = string> extends BoxProps, __BaseInputProps, ComboboxLikeProps<Value>, StylesApiProps<MultiSelectFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
    /** Controlled component value */
    value?: Value[];
    /** Uncontrolled component default value */
    defaultValue?: Value[];
    /** Called when value changes */
    onChange?: (value: Value[]) => void;
    /** Called with `value` of the removed item */
    onRemove?: (value: Value) => void;
    /** Called when the clear button is clicked */
    onClear?: () => void;
    /** Called when user attemps to select more values than allowed */
    onMaxValues?: () => void;
    /** Controlled search value */
    searchValue?: string;
    /** Default search value */
    defaultSearchValue?: string;
    /** Called when search changes */
    onSearchChange?: (value: string) => void;
    /** Maximum number of values, no limit if not set */
    maxValues?: number;
    /** Allows searching through options by user input @default false */
    searchable?: boolean;
    /** Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead. */
    nothingFoundMessage?: React.ReactNode;
    /** If set, the check icon is displayed near the selected option label @default true */
    withCheckIcon?: boolean;
    /** If set, unchecked labels are aligned with checked ones @default false */
    withAlignedLabels?: boolean;
    /** Position of the checkmark icon shown next to selected options in the dropdown @default 'left' */
    checkIconPosition?: 'left' | 'right';
    /** When enabled, selected options are hidden from the dropdown list @default false */
    hidePickedOptions?: boolean;
    /** When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only) @default false */
    clearable?: boolean;
    /** Determines how the clear button and rightSection are rendered @default 'both' */
    clearSectionMode?: ClearSectionMode;
    /** Props passed down to the clear button */
    clearButtonProps?: InputClearButtonProps;
    /** Props passed down to the hidden input */
    hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;
    /** Divider used to separate values in the hidden input `value` attribute @default ',' */
    hiddenInputValuesDivider?: string;
    /** A function to render content of the option, replaces the default content of the option */
    renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;
    /** A function to render content of the pill */
    renderPill?: (props: ComboboxRenderPillInput<Value>) => React.ReactNode;
    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
    scrollAreaProps?: ScrollAreaProps;
    /** Controls color of the default chevron */
    chevronColor?: MantineColor;
    /** Clear search value when item is selected @default true */
    clearSearchOnChange?: boolean;
    /** Controls whether dropdown opens when the input receives focus @default true */
    openOnFocus?: boolean;
}
export type MultiSelectFactory = Factory<{
    props: MultiSelectProps;
    ref: HTMLInputElement;
    stylesNames: MultiSelectStylesNames;
    signature: <Value extends Primitive = string>(props: MultiSelectProps<Value>) => React.JSX.Element;
}>;
export declare const MultiSelect: (<Value extends Primitive = string>(props: MultiSelectProps<Value>) => React.JSX.Element) & import("../..").ThemeExtend<{
    props: MultiSelectProps;
    ref: HTMLInputElement;
    stylesNames: MultiSelectStylesNames;
    signature: <Value extends Primitive = string>(props: MultiSelectProps<Value>) => React.JSX.Element;
}> & import("../..").ComponentClasses<{
    props: MultiSelectProps;
    ref: HTMLInputElement;
    stylesNames: MultiSelectStylesNames;
    signature: <Value extends Primitive = string>(props: MultiSelectProps<Value>) => React.JSX.Element;
}> & Record<string, never> & import("../..").FactoryComponentWithProps<{
    props: MultiSelectProps;
    ref: HTMLInputElement;
    stylesNames: MultiSelectStylesNames;
    signature: <Value extends Primitive = string>(props: MultiSelectProps<Value>) => React.JSX.Element;
}> & {
    displayName?: string;
};