AutoComplete

Props

Name	Type	Description
autoComplete	string	Browser autofill, off is the default value. Works as HTML autoComplete attribute
data	T[]	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	string \| null	Default value for the uncontrolled mode
isDisabled	boolean	Disable the component
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
hasClearButton	boolean	Whether or not to show a clear button inside the input element. Default is false
isLoading	boolean	Display a loading icon inside the dropdown
isOpen	boolean	Control the dropdown state
isRequired	boolean	Validate the component as a required field
maxLength	number	Max number of characters
messages	AutoCompleteMessages ==== interface AutoCompleteMessages { nothingFound: React.ReactNode, }	Customize component text labels Consider using Leda provider to set messages globally.
minSearchLength	number	The minimal number of symbols that triggers the dropdown opening
name	string	A component name
onBlur	(event: BlurEvent) => void	Blur handler
onChange	(event: ChangeEvent<T>) => void	Value change handler
onFocus	(event: FocusEvent) => void	Focus handler
placeholder	string	Placeholder
shouldCorrectValue	boolean	Puts the last correct (present in data) value into the input field or leaves it empty. Is triggered by a blur event
shouldShowAllSuggestions	boolean	Show all data elements regardless of what is in the input field
shouldShowNothingFound	boolean	False is default, pass true to enable Nothing found message
searchFields	string[]	You can use any of the data object's fields for seraching
sortSuggestions	(a: T, b: T) => number	Sort dropdown 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	string \| null	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
Submit event


() => {
  return (
    <L.AutoComplete
      data={['Argentina', 'Spain']}
      onChange={({ component }) => console.log(component.value)}
      _w-48
    />
  )  
}

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.AutoComplete
  data={['Argentina', 'Spain']}
  onChange={({ component }) => console.log(component.value)}
  form='autocomplete_form'
  name='autocomplete'
  isRequired
  requiredMessage='Please enter something'
  validator={(val) => val.length > 3}
  invalidMessage='No less than 4 symbols'
  _w-48
/>
<br />
<L.Button
  form='autocomplete_form'
  onClick={({ form }) => console.log(form)}
>
  Click me
</L.Button>
</>

Customization props

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


<L.AutoComplete
  noSuggestionsRender={({ elementProps }) => (
    <div {...elementProps}>
      <div className='text-amber-400 font-bold'>
        no suggestions found
      </div>
    </div>
  )}
  data={['Argentina', 'Spain']}
  onChange={({ component }) => console.log(component.value)}
  _w-48
/>

Suggestions list theme

Theme prop	CSS class name
container	ld-suggestion-wrapper
containerVisible	ld-visible
containerTop	ld-pos-top
group	ld-suggestion-group
groupLabel	ld-suggestion-group-label
item	ld-suggestion-item
itemHighlighted	ld-highlighted
itemPlaceholder	ld-placeholder
itemSelected	ld-selected
list	ld-suggestion-list
noSuggections	ld-nodata