Dropdown

The dropdown allows users to select a value from a list of options, supporting both single and multiple selections with customisable appearance and behaviour

Overview

The dropdown component is a themed version of FormKit’s dropdown input. It can handle both single-select and multi-select options and supports dynamic and paginated data.

For more detailed information on configuring and using FormKit’s dropdown component, refer to the official FormKit dropdown 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 dropdown component in your FormKit schema or as a standalone component.

Example usage

Once registered, use the dropdown component like this:


                                                        
                                                        
                                                            <FormKit 
                                                            type="dropdown" 
                                                            label="Choose your option" 
                                                            name="option" 
                                                            :options="['Option 1', 'Option 2', 'Option 3']" 
                                                        />
                                                        
                                                            

Accessibility

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

Internationalisation

The dropdown supports dynamic and grouped options, custom labels, and multiple selection formats, making it suitable for international and multi-locale environments.