animation
Description
The animation of the popover.
Type
"bottom" | "left" | "right" | "scale" | "top" | "none"Default
'scale'MultiSelect
MultiSelect is a component used for allowing users to select multiple values from a list of options.
Props
MultiSelectProps
boundary
Description
The boundary area for the popper. Used within the preventOverflow modifier.
Type
HTMLElement | "clippingParents" | "scrollParent"Default
'clippingParents'clearable
Description
If true, display the multi select clear icon.
Type
booleanDefault
trueclearIconProps
Description
Props for multi select clear icon element.
Type
SelectIconPropscloseDelay
Description
The number of delay time to close.
Type
numberDefault
200closeOnBlur
Description
If true, the popover will close when you blur out it by clicking outside or tabbing out.
Type
booleanDefault
truecloseOnEsc
Description
If true, the popover will close when you hit the Esc key.
Type
booleanDefault
truecloseOnSelect
Description
If true, the list element will be closed when value is selected.
Type
booleanDefault
truecolorScheme
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"component
Description
The custom display value to use.
Type
FC<{
index: number
label: string
value: string
onRemove: MouseEventHandler<HTMLElement>
}>containerProps
Description
Props for multi select container element.
Type
Omit<HTMLUIProps, "children">defaultIsOpen
DeprecatedDescription
If true, the popover will be initially opened.
Deprecated
Use defaultOpen instead
Type
booleandefaultOpen
Description
If true, the popover will be initially opened.
Type
booleandefaultValue
Description
The initial value of the select.
Type
string[]disabled
Description
If true, the form control will be disabled.
Type
booleanDefault
falseduration
Description
The animation duration.
Type
number | MotionLifecycleProps<number>errorBorderColor
Description
The border color when the input is invalid.
Type
stringeventListeners
Description
If provided, determines whether the popper will reposition itself on scroll and resize of the window.
Type
type ONLY_FOR_FORMAT =
| boolean
| { resize?: boolean | undefined; scroll?: boolean | undefined }Default
truefieldProps
Description
Props for multi select field element.
Type
Omit<MultiSelectFieldProps, "children">flip
Description
If true, the popper will change its placement and flip when it's about to overflow its boundary area.
Type
booleanDefault
truefocusBorderColor
Description
The border color when the input is focused.
Type
stringfooter
Description
The footer of the multi select content element.
Type
string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | FC<...>gutter
Description
The distance or margin between the reference and popper.
It is used internally to create an offset modifier.
Type
UIValue<number>Default
8header
Description
The header of the multi select content element.
Type
string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | FC<...>iconProps
Description
Props for multi select icon element.
Type
SelectIconPropsinvalid
Description
If true, the form control will be invalid.
Type
booleanDefault
falseisClearable
DeprecatedDescription
If true, display the multi select clear icon.
Deprecated
Use clearable instead.
Type
booleanDefault
trueisDisabled
DeprecatedDescription
If true, the form control will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseisInvalid
DeprecatedDescription
If true, the form control will be invalid.
Deprecated
Use invalid instead.
Type
booleanDefault
falseisLazy
DeprecatedDescription
If true, the PopoverContent rendering will be deferred until the popover is open.
Deprecated
Use lazy instead
Type
booleanDefault
falseisOpen
DeprecatedDescription
If true, the popover will be opened.
Deprecated
Use open instead
Type
booleanisReadOnly
DeprecatedDescription
If true, the form control will be readonly.
Deprecated
Use readOnly instead.
Type
booleanDefault
falseisRequired
DeprecatedDescription
If true, the form control will be required.
Deprecated
Use required instead.
Type
booleanDefault
falseitems
Description
If provided, generate options based on items.
Type
SelectItem[]lazy
Description
If true, the PopoverContent rendering will be deferred until the popover is open.
Type
booleanDefault
falselazyBehavior
Description
The lazy behavior of popover's content when not visible. Only works when lazy={true}
- unmount: The popover's content is always unmounted when not open.
- keepMounted: The popover's content initially unmounted, but stays mounted when popover is open.
Type
LazyModeDefault
'unmount'listProps
Description
Props for multi select list element.
Type
Omit<SelectListProps, "children">matchWidth
Description
If true, the popper will match the width of the reference at all times.
It's useful for autocomplete, date-picker and select patterns.
Type
booleanDefault
falsemaxSelectValues
Description
The maximum selectable value.
Type
numbermodifiers
Description
Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
Type
Partial<Modifier<string, any>>[]Docs
https://popper.js.org/docs/v2/modifiers/name
Description
The HTML name attribute used for forms.
Type
stringoffset
Description
The main and cross-axis offset to displace popper element from its reference element.
Type
[number, number]omitSelectedValues
Description
If true, the selected item(s) will be excluded from the list.
Type
booleanDefault
falseonChange
Description
The callback invoked when value state changes.
Type
(value: string[]) => voidonClose
Description
Callback fired when the popover closes.
Type
() => voidonOpen
Description
Callback fired when the popover opens.
Type
() => voidopen
Description
If true, the popover will be opened.
Type
booleanopenDelay
Description
The number of delay time to open.
Type
numberDefault
200optionProps
Description
Props for select option element.
Type
Omit<OptionProps, "children" | "value">placeholder
Description
The placeholder of the select.
Type
stringplacement
Description
The placement of the popper relative to its reference.
Type
UIValue<Placement>Default
'bottom'portalProps
Description
Props to be forwarded to the portal component.
Type
Omit<PortalProps, "children">Default
'{ disabled: true }'preventOverflow
Description
If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.
Type
booleanDefault
truereadOnly
Description
If true, the form control will be readonly.
Type
booleanDefault
falserequired
Description
If true, the form control will be required.
Type
booleanDefault
falseseparator
Description
The visual separator between each value.
Type
stringDefault
','size
Description
The size of the MultiSelect.
Type
"xs" | "sm" | "md" | "lg" | "xl"Default
"md"strategy
Description
The CSS positioning strategy to use.
Type
"fixed" | "absolute"Default
'absolute'value
Description
The value of the select.
Type
string[]variant
Description
The variant of the MultiSelect.
Type
"filled" | "flushed" | "outline" | "unstyled"Default
"outline"Edit this page on GitHub