Autocomplete
An advanced autocomplete component supporting single and multiple selection, freeSolo mode for custom values, filtering, sorting, and form integration. Perfect for searchable dropdowns and tag inputs.
Installation
Import
Usage
Use Autocomplete for searchable dropdowns and tag inputs. Choose single selection for exclusive choices and multiple for tags or multi-select scenarios. Enable freeSolo when users need to add custom values. Use maxOptions to limit selections. Set dependsOn for dependent dropdowns that change based on another field's value. Autocomplete supports form integration with Conform via the field prop, automatically displaying validation errors and integrating with form schemas.
Design Guidelines
Maintain consistent autocomplete styling with your form inputs. Show clear visual feedback for selections. Use chips for multiple selections. Provide helpful placeholder text. Limit options displayed at once for better performance. Use disableSorting when order matters.
Country Selector
Searchable country selector with object options
Product Search
Product search autocomplete with filtering
Tag Input for Blog Posts
Multiple tag selection for blog post categorization
Skills Selector
Select multiple skills with freeSolo for custom entries
Dependent Dropdowns
State selector that depends on country selection
Limited Selection
Select up to 3 favorite categories
Form Integration
Autocomplete with form integration using Conform
Validation Errors
Autocomplete automatically displays validation errors from form schema
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
options | Option<string>[] | — | Array of options. Can be strings or objects with label/value properties |
multiple | boolean | false | Enable multiple selection mode. Selected options displayed as chips |
freeSolo | boolean | false | Allow creating custom options by typing and pressing Enter |
separator | "comma" | "semicolon" | "pipe" | "space" | "comma" | Separator for adding multiple values in freeSolo mode (only when multiple=true) |
maxOptions | number | — | Maximum number of options that can be selected in multiple mode |
dependsOn | string | — | Name of another field that this autocomplete depends on |
disableSorting | boolean | false | Disable sorting of filtered options, preserving original order |
value | string | — | Controlled value. Pipe-separated for multiple selections |
defaultValue | string | — | Default value. Pipe-separated for multiple selections |
onChange | (value: string) => void | — | Callback fired when selection changes. Value is pipe-separated for multiple |
label | string | React.ReactNode | — | Label displayed above the input |
placeholder | string | — | Placeholder text for the input |
field | FieldMetadata | — | Conform field metadata for form integration and validation |
topText | string | React.ReactNode | — | Helper text displayed above the label |
labelProps | React.LabelHTMLAttributes<HTMLLabelElement> | — | Additional props for the label element |
inputClass | string | — | Additional CSS classes for the input element |
wrapperClassName | string | — | Additional CSS classes for the wrapper element |
className | string | — | Additional CSS classes to apply to the component |
Accessibility
Accessibility features and considerations
Autocomplete includes proper ARIA attributes for accessibility. Keyboard navigation supports arrow keys, Enter, Escape, Tab, Home, and End. Screen readers announce options and selections. Ensure labels are descriptive and provide clear feedback.