MultiSelect

Props

Name	Type	Description
autoComplete	string	Browser autofill, off is the default value. Works as HTML autoComplete attribute
canSelectAll	boolean	...
compareObjectsBy	T extends object ? ((suggestionListItems: SomeObject) => any) \| string : never
data	(object \| null)[] \| (string \| number \| null)[] \| null	Data for the dropdown list. If data is an array of objects, use textField to specify which object's field should be used as text for the dropdown items
defaultValue	T	...
filterRule	'smart' \| 'startsWith' \| 'includes'	Search mode, smart is default, looks for one or several words regardless of their order, can be slow if data has thousands of elements or more
groupBy	(option: Value) => string \| undefined	...
hasCheckBoxes	boolean	Checkboxes in the dropdown list
hasClearButton	boolean	Whether or not to show a clear button inside the input element. Default is false
isDisabled	boolean	Disable the component
isLoading	boolean	Display a loading icon inside the dropdown
isOpen	boolean	Control the dropdown state
maxSelected	number	...
maxTags	number	Max number of elements shown separately as tags. After exceeding this number the elements will be grouped as "n values selected"
messages	MultiSelectMessages ==== interface MultiSelectMessages { nothingFound: React.ReactNode, }	Customize component text labels Consider using Leda provider to set messages globally.
onBlur	(event: BlurEvent) => void	Blur handler
onChange	(event: ChangeEvent<T>) => void	Value change handler
onFocus	(event: FocusEvent) => void	Focus handler
placeholder	string	Placeholder
shouldHideInput	boolean	Renders the component without an input field
shouldKeepSuggestions	boolean	Suggestions do not disappear from the list on selection
shouldRender	boolean	Pass `false` if you don't want the component to appear
shouldSelectedGoFirst	boolean	Selected values go first in the list
sortSuggestions	(a: T, b: T) => number	Sort dropdown list items
textField	T extends object ? string : never	It is mandatory if data is an array of objects, textField specifies which object's field is used to get dropdown item text value. No effect if data is an array of strings
value	T	Component value
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.

Basic
Controlled
Objects as data
Messages


() => {
  return (
    <L.MultiSelect
      data={['Argentina', 'Spain', 'Mexico', 'Colombia', 'Peru', 'Chile', 'Costa Rica', 'Puerto Rico']}
      onChange={({ component }) => console.log(component.value)}
      _w-96
    />
  )  
}

Validation components' props

Name	Type	Description
form	string	Form name
name	string	Component name
isRequired	boolean	If you don't want the field to be empty
isValid	boolean	Controlled valid state
invalidMessage	ReactNode	Text to show when the value does not match requirements
requiredMessage	ReactNode	Text to show when the field is not filled
shouldValidateUnmounted	boolean	The field can still affect form submission even if it is not rendered
validator	Validator \| PredefinedValidator \| RegExp \| ValidatorObject[]
	interface Validator { (value: any): boolean, }	A validator is a function that takes a value and returns true or false depending on the logic it contains E.g. `(value) => value.length > 4`
	type PredefinedValidator = \| 'creditCardNumber' \| 'email' \| 'url'	See predefined validators
	interface ValidatorObject { validator: PredefinedValidator \| RegExp \| Validator, invalidMessage?: string, }	`ValidatorObject` is useful wnen you need to validate a value against several validators and show inividual messages for each. Just use an array of validator objects. E.g. [ { validator: (value) => value.length > 4, invalidMessage: 'More than 4 sympols please' }, { validator: /^\w+$/, invalidMessage: 'Only a-z, A-Z, 0-9 and _ are allowed' } ]

<>
<L.MultiSelect
  data={['Argentina', 'Spain', 'Mexico', 'Columbia', 'Peru', 'Chile', 'Costa Rica', 'Puerto Rico']}
  onChange={({ component }) => console.log(component.value)}
  form='multiselect_form'
  name='multiselect'
  isRequired
  requiredMessage='Please enter something'
  validator={(val) => val.length > 3}
  invalidMessage='No less than 4 items'
  _w-48
/>
<br />
<L.Button
  form='multiselect_form'
  onClick={({ form }) => console.log(form)}
>
  Click me
</L.Button>
</>

Customization props

Name	Type
inputRender itemRender invalidMessageRender listRender noSuggestionsRender selectAllItemRender tagRender tagsUnionRender wrapperRender	({ Element, elementprops, componentProps, componentState }): React.ReactNode	Customization


<L.MultiSelect
  data={['Argentina', 'Spain', 'Mexico', 'Columbia', 'Peru', 'Chile', 'Costa Rica', 'Puerto Rico']}
  onChange={({ component }) => console.log(component.value)}
  _w-48
/>