Combobox

The combobox allows users to search through a list of options and make a selection, offering a more efficient way to find and choose items.

Overview

The combobox component is a styled version of FormKit’s autocomplete input, supporting both single and multiple selections.

For more detailed information on how to configure and use FormKit’s autocomplete component, visit the official FormKit autocomplete documentation.

Basic usage

Check out the FormKit documentation in the Foundations section for setup instructions if you’re new to FormKit.

Importing the component

Ensure your application is configured to use the FormKit plugin. You can then include the autocomplete component in your FormKit schema or as a standalone component.

Example usage

Once registered, use the autocomplete component like this:


                                                        
                                                        
                                                            <FormKit
                                                          type="autocomplete"
                                                          label="Search for a country"
                                                          name="country"
                                                          :options="['USA', 'Canada', 'Mexico']"
                                                        />
                                                        
                                                            

Accessibility

The autocomplete component inherits accessibility features from the native HTML elements, supporting keyboard navigation and customisable accessible labels.

Internationalisation

Autocomplete supports right-to-left languages and customisable labels, making it suitable for multilingual environments.