Search

The search input allows users to enter text to search through a dataset or website, leveraging native HTML search features like the browser's built-in "clear" button

Overview

The search component is a styled version of FormKit’s search input, which behaves similarly to a text input but may include browser-specific enhancements like a clear button.

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

Example usage

Once registered, use the search component like this:


                                                        
                                                        
                                                            <FormKit 
                                                            type="search" 
                                                            label="Search" 
                                                            placeholder="Search for something..." 
                                                            value="Apple Cider" 
                                                        />
                                                        
                                                            

Accessibility

The search component is fully accessible, supporting keyboard navigation, aria attributes, and customisable accessible labels.

Internationalisation

The search input supports internationalised placeholders and labels, making it adaptable for global use.