Autocomplete

import Autocomplete from 'frui/fields/Autocomplete';

Copy

Props

The following props are accepted by Autocomplete.

Name	Type	Required	Notes
className	string	No	Standard HTML class names
defaultValue	string	No	Alias to value
error	string\|boolean	No	Any error message
name	string	No	Used for react server components.
onChange	Function	No	Event handler when value has changed
onDropdown	Function	No	Event handler when dropdown opens/closes
onQuery	Function	No	Event handler when something is searched
onUpdate	Function	No	Update event handler
options	string[]	No	List of select options.
style	CSS Object	No	Standard CSS object
value	string	No	Selected value from the options

Basics

The following is a basic example of an Autocomplete field.

<Autocomplete 
  className="w-full" 
  options={[ 'foo', 'bar' ]} 
  placeholder="Enter foo or bar"
/>

Copy

Events

The following example makes use of all the possible events for Autocomplete.

<Autocomplete 
  className="w-full" 
  options={['foo', 'bar']}
  onQuery={(query, set) => setTimeout(
    () => set(['boo', 'bar', 'baz']), 
    1000
  )}
  onDropdown={open => console.log('dropdown', open)}
  onChange={e => console.log('change', e)}
  onUpdate={value => console.log('update', value)}
  placeholder="Enter 'b'"
/>

Copy

On Change

The onChange event is triggered when the value has changed. The following arguments are passed to the event handler:

Name	Type	Sample
event	Event Object	see: Change Event

On Dropdown

The onDropdown event is triggered when the dropdown opens or closes. The following arguments are passed to the event handler:

Name	Type	Sample
open	boolean	`true`

On Query

The onQuery event is triggered when the user searches for something. The following arguments are passed to the event handler:

Name	Type	Sample
query	string	`foobar`
setOptions	Function	`set(['boo', 'bar', 'baz'])` Copy

On Update

The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:

Name	Type	Sample
value	string	`foobar`

Errors

You can pass the error prop to highlight the Autocomplete field red.

<Autocomplete 
  error
  className="w-full" 
  options={[ 'foo', 'bar' ]} 
  placeholder="Enter foo or bar"
/>

Copy

Custom Styles

You can add your own custom class to Autocomplete components or use any combination of frui-field-autocomplete, frui-field-autocomplete-dropdown, frui-field-autocomplete-options, and frui-field-autocomplete-option CSS classes.

Fields

Checkbox