Autocomplete
Accepts free-form text while filtering and announcing suggestions from a known collection.
Contract
| Axis | Behavior |
|---|---|
| value | the text value remains editable even when it does not match an item |
| input anatomy | Label → InputGroup → optional InputAdornment + Input + Clear + Trigger; Icon belongs inside Trigger |
| popup anatomy | Status announces results; List contains groups, items, separators, and Empty feedback |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/autocomplete.css';Scroll inside the code area to read long lines.
Imports
import { TRAutocomplete } from '@tinyrack/ui/components/autocomplete';
import { TRForm } from '@tinyrack/ui/components/form';
import { TRField } from '@tinyrack/ui/components/field';
import { TRButton } from '@tinyrack/ui/components/button';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Sizes permalink
Pass uiSize to InputGroup to align the Autocomplete control with neighboring Input, NumberField, or Button heights.
Input completion modes permalink
Choose list suggestions, combined list and inline completion, inline completion only, or no completion behavior.
Option and result states permalink
Compare an available collection, a disabled option, and empty feedback without mixing root availability states.
Free-form input semantics permalink
A value may remain outside the collection; selecting a suggestion still updates the same editable text value.
Overlay composition permalink
Portal mounts the popup outside the control; Positioner anchors it, and Escape dismisses it and restores focus.
Keyboard selection permalink
Type to filter, use Arrow keys to move the highlight, press Enter to accept it, and press Escape to close the popup.
Native form reset permalink
Reset restores the uncontrolled default value and clears submitted output.
API
The complete Base UI anatomy is exported from @tinyrack/ui/components/autocomplete: Root, Value, Trigger, Input, InputGroup, Icon, Clear, List, Status, Portal, Backdrop, Positioner, Popup, Arrow, Group, GroupLabel, Item, Row, Collection, Empty, and Separator. InputAdornment is Tinyrack's decorative input companion. InputGroup accepts uiSize?: 'md' | 'lg' (default md) to align the input, adornment, clear, and trigger heights with neighboring controls. Every part has a named export and prop type; Base UI state, root action/event-detail, filter, and filter-option types are also available with TRAutocomplete* names. Use useAutocompleteFilter/TRAutocomplete.useFilter for locale-aware matching and useAutocompleteFilteredItems/TRAutocomplete.useFilteredItems inside Root to read its filtered collection.