AutoComplete

Props

Name	Type	Description
allowedSymbols	'numbers' \| RegExp	Put 'numbers' to allow numbers only, or a RegExp to use your own pattern. Typed characters not matching the pattern are ignored
autoComplete	string	Browser autofill, off is the default value. Works as HTML autoComplete attribute
capitalizeFirstLetter	boolean	Capitalizes the first symbol in the input. Default is false
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
forbiddenSymbols	'numbers' \| RegExp	Put 'numbers' to forbid numbers, or a RegExp to use your own pattern. Typed characters matching the pattern are ignored
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
letterCase	'lower' \| 'upper'	Makes all letters upper or lowercase
maxLength	number	Max number of characters
messages	AutoCompleteMessages ==== interface AutoCompleteMessages { nothingFound: React.ReactNode, }	Customize component text labels Consider using Chili 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.


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

Validation components' props

Name	Type	Description
form	string	Form name
invalidMessage	ReactNode	Text to show when the value does not match requirements
isRequired	boolean	If you don't want the field to be empty
isValid	boolean	Controlled valid state
name	string	Component name
persistence	'sessionStorage' \| 'localStorage'	Persist the value in web storage
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

No suggestions
Item render


<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	chili-suggestion-wrapper
containerVisible	chili-visible
containerTop	chili-pos-top
group	chili-suggestion-group
groupLabel	chili-suggestion-group-label
item	chili-suggestion-item
itemHighlighted	chili-highlighted
itemPlaceholder	chili-placeholder
itemSelected	chili-selected
list	chili-suggestion-list
noSuggections	chili-nodata