MultiSelect: onChange callback signature
The onChange function is called with an array of strings as a single argument.
multiselect/props
32 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
MultiSelect: controlled component example
import { useState } from 'react'; import { MultiSelect } from '@mantine/core'; function Demo() { const [value, setValue] = useState<string[]>([]); return <MultiSelect data={[]} value={value} onChange={setValue} />; } This example shows how to create a controlled MultiSelect component with state management.
MultiSelect: loading state prop and loadingPosition
Set the loading prop to display a loading indicator. By default, the loader is displayed on the right side of the input. You can change the position with the loadingPosition prop to 'left' or 'right'. This is useful for async operations like API calls, searches, or validations.
MultiSelect: clearable prop behavior
Set the clearable prop to display the clear button in the right section. The button is not displayed when the component does not have a value, the component is disabled, or the component is read only.
MultiSelect: searchable prop
Set the searchable prop to allow filtering options by user input.
MultiSelect: controlled search value example
import { useState } from 'react'; import { MultiSelect } from '@mantine/core'; function Demo() { const [searchValue, setSearchValue] = useState(''); return ( <MultiSelect searchable searchValue={searchValue} onSearchChange={setSearchValue} data={[]} /> ); } This example shows how to control the search value with searchValue and onSearchChange props.
MultiSelect: nothingFoundMessage prop
Set the nothingFoundMessage prop to display a given message when no options match the search query or there is no data available. If the nothingFoundMessage prop is not set, the MultiSelect dropdown will be hidden.
MultiSelect: checkIconPosition and related props
Set checkIconPosition prop to 'left' or 'right' to control position of check icon in active option. To remove the check icon, set withCheckIcon={false}. To align unchecked labels with checked ones, set withAlignedLabels prop.
MultiSelect: maxValues prop
You can limit the number of selected values with the maxValues prop. This will not allow adding more values once the limit is reached.
MultiSelect: hidePickedOptions prop
To remove selected options from the list of available options, set the hidePickedOptions prop.
MultiSelect: value type support
MultiSelect supports primitive values (strings, numbers, booleans) as value type. MultiSelect automatically infers the value type. If you want to set the value type explicitly, pass type argument as a generic parameter to the MultiSelect component.
MultiSelect: explicit value type example
import { MultiSelect } from '@mantine/core'; type MultiSelectValue = 'React' | 'Angular' | 'Svelte' | number; function Demo() { return <MultiSelect<MultiSelectValue> data={['React', 'Angular', 'Svelte', 100]} />; } This example shows how to set the value type explicitly using a type argument.
MultiSelect: sort options with filter function
By default, options are sorted by their position in the data array. You can change this behavior with the filter function.
MultiSelect: renderOption callback
The renderOption callback allows you to customize option rendering. It is called with the option object and checked state. The function must return a React node.
MultiSelect: renderPill callback
The renderPill callback allows you to customize pill rendering. The function receives the option (that was passed to data), value, onRemove and disabled props. It must return a React node.
MultiSelect: withPillsReorder prop
Set the withPillsReorder prop to allow reordering pills. Dropping a pill before or after another pill updates the component value accordingly. Reordering is automatically disabled when disabled or readOnly is set.
MultiSelect: pill reordering keyboard shortcuts
You can reorder pills with keyboard when withPillsReorder is set. Pills are not part of the Tab order. With focus on the input, press ArrowLeft (when the caret is at the start of the input) to move focus to the last pill. ArrowLeft and ArrowRight move focus between pills (RTL-aware). Pressing ArrowRight on the last pill returns focus to the input. Alt + ArrowLeft and Alt + ArrowRight reorder the focused pill (RTL-aware). Focus follows the moved pill so multiple moves can be chained without re-focusing.
MultiSelect: custom pill renderer with reorderProps example
import { MultiSelect } from '@mantine/core'; function Demo() { return ( <MultiSelect data={['React', 'Angular', 'Vue']} withPillsReorder renderPill={({ value, onRemove, reorderProps }) => ( <div {...reorderProps}> {value} <button onClick={onRemove}>×</button> </div> )} /> ); } When using a custom pill renderer with renderPill prop, spread the reorderProps from the render callback payload onto the focusable pill root element to keep reordering working. reorderProps carries the tabIndex, data-mantine-pill-index attribute and the keyboard handler that drive keyboard reorder.
MultiSelect: scrollable dropdown defaults
By default, the options list is wrapped with ScrollArea.Autosize. You can control the dropdown max-height with the maxDropdownHeight prop if you do not change the default settings.
MultiSelect: withScrollArea prop
If you want to use native scrollbars, set withScrollArea={false}. Note that in this case, you will need to change the dropdown styles with Styles API.
MultiSelect: floatingHeight="viewport" prop
Set floatingHeight="viewport" to make the dropdown grow to fill the available vertical space in the viewport. The flip middleware is disabled in this mode – the dropdown always opens in the configured direction and is constrained to the viewport edges instead of flipping to the other side. Useful when working with large option lists.
MultiSelect: group options support
MultiSelect supports grouping options. Options can be organized into groups in the dropdown.
MultiSelect: disabled options behavior
When an option is disabled, it cannot be selected and is ignored in keyboard navigation. Note that the user can still enter a disabled option as a value. If you want to prohibit certain values, use a controlled component and filter them out in the onChange function.
MultiSelect: withinPortal prop for Popover usage
To use MultiSelect inside popover, you need to set withinPortal: false.
MultiSelect: dropdownOpened prop and callbacks
You can control the dropdown opened state with the dropdownOpened prop. Additionally, you can use onDropdownClose and onDropdownOpen to listen to dropdown opened state changes.
MultiSelect: dropdown position behavior
By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the input. You can change this behavior by setting the position and middlewares props, which are passed down to the underlying Popover component.
MultiSelect: dropdown width via comboboxProps
To change the dropdown width, set the width prop in comboboxProps. By default, the dropdown width is equal to the input width.
MultiSelect: dropdown offset via comboboxProps
To change the dropdown offset, set the offset prop in comboboxProps.
MultiSelect: dropdown animation with transitionProps
By default, dropdown animations are disabled. To enable them, you can set transitionProps, which will be passed down to the underlying Transition component.
MultiSelect: readOnly prop behavior
Set readOnly to make the input read-only. When readOnly is set, MultiSelect will not show suggestions and will not call the onChange function.
MultiSelect: disabled prop behavior
Set disabled to disable the input. When disabled is set, the user cannot interact with the input and MultiSelect will not show suggestions.
MultiSelect: Backspace key behavior
When the search input is empty and the user presses the Backspace key, the last selected item is removed. This behavior is built-in and cannot be disabled.