Combobox / autocomplete with async or array sources, fuzzy filtering, multi-select chips, grouping and full keyboard navigation.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-autocomplete/latest/gs-autocomplete.min.css"> <script src="https://cdn.get-set.it/gs-autocomplete/latest/gs-autocomplete.min.js"></script>
import Autocomplete from '@get-set/gs-autocomplete'; export default function App() { return ( <Autocomplete> <div className="content">Your Autocomplete content</div> </Autocomplete> ); }
Try typing “re” or “v”.
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Reference. |
| source | GSAutocompleteSource | none | Suggestion source: an array of items or an async query function. |
| filter | GSAutocompleteFilter | 'contains' | Filter strategy applied to an array source. Default: 'contains'. |
| caseSensitive | boolean | false | Match case-sensitively for the built-in filters. Default: false. |
| minChars | number | 1 | Minimum characters before searching. Default: 1. |
| debounce | number | 200 | Debounce delay (ms) before a search runs. Default: 200. |
| maxResults | number | false | 50 | Cap the number of rendered results. Default: 50. `false` = no cap. |
| highlightMatch | boolean | true | Bold the matched substring in each label. Default: true. |
| grouping | boolean | false | Group items by their `group` field under headings. Default: false. |
| openOnFocus | boolean | false | Show suggestions immediately on focus (before typing). Default: false. |
| multiple | boolean | false | Multi-select mode rendering selected items as removable chips. Default: false. |
| allowFreeText | boolean | false | Allow committing arbitrary typed text that is not in the source. Default: false. |
| closeOnSelect | boolean | none | Keep the dropdown open after a selection (multiple mode). Default: true when multiple. |
| clearOnSelect | boolean | none | Clear the query text after selecting (multiple mode). Default: true when multiple. |
| maxItems | number | false | none | Max selected chips allowed (multiple mode). `false` = unlimited. Default: false. |
| placeholder | string | none | Placeholder text for the input. |
| clearable | boolean | true | Show the clear (×) button when there is a value. Default: true. |
| disabled | boolean | false | Disable the whole control. Default: false. |
| size | GSAutocompleteSize | 'md' | Control size preset. Default: 'md'. |
| noResultsText | string | 'No results' | Text shown when a search yields no results. Default: 'No results'. |
| loaderHtml | string | none | Custom spinner content (HTML string). Defaults to the built-in spinner. |
| itemRender | GSAutocompleteItemRender | none | Custom item renderer returning an HTML string per row. |
| animation | GSAutocompleteAnimation | false | 'fade-up' | Dropdown open animation name. `false` disables motion. Default: 'fade-up'. |
| animationDuration | number | 180 | Animation duration in ms. Default: 180. |
| animationEasing | string | 'cubic-bezier(0.16, 1, 0.3, 1)' | CSS easing applied to the dropdown animation. |
| reducedMotion | 'auto' | boolean | 'auto' | Honor `prefers-reduced-motion`. `'auto'` follows the OS setting; `true` always reduces; `false` never reduces. Default: 'auto'. |
| theme | GSAutocompleteTheme | 'auto' | Visual theme. `auto` follows prefers-color-scheme. Default: 'auto'. |
| accentColor | string | none | Accent color (CSS var --gsa-accent) for active rows / focus ring. |
| rtl | boolean | false | Right-to-left layout. Default: false. |
| customClass | GSAutocompleteCustomClass | none | Per-part class overrides. |
| className | string | none | Extra class name applied to the wrapper root. |
| value | string | number | Array<string | number> | none | Initial selected value(s). String for single, array for multiple. |
Array or promise-based remote data.
Forgiving, ranked substring matching.
Token chips for multiple picks.
Section options under group headers.