AutoComplete

Props

NameTypeDescription
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
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

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.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

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