Select

The select input allows users to choose a single or multiple options from a list, using a styled version of the native HTML select input

Overview

The select component is a themed version of FormKit’s select input, supporting single or multi-selection, arrays of options, and customisable option groups.

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

Example usage

Once registered, use the select component like this:


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

Accessibility

The select component supports full keyboard navigation, aria attributes, and customizable labels for improved accessibility.

Internationalisation

The select input supports internationalised labels and options, as well as custom option groups, making it adaptable for global use.