MultiSelect

Props

NameTypeDescription
autoCompletestring

Browser autofill, off is the default value.

Works asĀ HTML autoComplete attribute

canSelectAllboolean...
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
defaultValueT...
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...
hasCheckBoxesbooleanCheckboxes in the dropdown list
hasClearButtonbooleanWhether or not to show a clear button inside the input element. Default is false
isDisabledbooleanDisable the component
isLoadingbooleanDisplay a loading icon inside the dropdown
isOpenbooleanControl the dropdown state
maxSelectednumber...
maxTagsnumberMax 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) => voidBlur handler
onChange(event: ChangeEvent<T>) => voidValue change handler
onFocus(event: FocusEvent) => voidFocus handler
placeholderstringPlaceholder
shouldHideInputbooleanRenders the component without an input field
shouldKeepSuggestionsbooleanSuggestions do not disappear from the list on selection
shouldRender
boolean
Pass false if you don't want the component to appear
shouldSelectedGoFirstbooleanSelected values go first in the list
sortSuggestions(a: T, b: T) => numberSort dropdown list items
textFieldT extends object ? string : neverIt 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
valueTComponent 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

NameTypeDescription
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

NameType
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
/>