Components

Autocomplete

A text input that filters a list of options as the user types. Supports keyboard navigation, labels, error states, sizes, and disabled mode.

Installation

npm install @trinkui/react

Import

import { Autocomplete } from "@trinkui/react";

Usage

Start typing to filter the list. Use arrow keys to navigate and Enter to select.

<Autocomplete
  options={[
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    { value: "cherry", label: "Cherry" },
    // ...more
  ]}
  placeholder="Search fruits..."
  onChange={(value) => setSelected(value)}
/>

With Label

Add a label above the input for form contexts.

Favorite fruit

<Autocomplete
  label="Favorite fruit"
  placeholder="Type to search..."
  options={fruits}
  onChange={(value) => console.log(value)}
/>

Disabled

The input cannot be interacted with when disabled.

Fruit (disabled)

<Autocomplete
  label="Fruit (disabled)"
  placeholder="Cannot type here"
  options={fruits}
  disabled
/>

Sizes

Available in three sizes: sm, md, and lg.

<Autocomplete size="sm" options={fruits} placeholder="Small" />
<Autocomplete size="md" options={fruits} placeholder="Medium" />
<Autocomplete size="lg" options={fruits} placeholder="Large" />

Error State

Required field

Please select a fruit.

<Autocomplete
  label="Required field"
  placeholder="Select a fruit"
  error="Please select a fruit."
  options={fruits}
/>

Props

Prop	Type	Default	Description
options	{ value: string; label: string }[]	--	Array of selectable options
value	string	--	Controlled selected value
onChange	(value: string) => void	--	Callback when an option is selected
onInputChange	(input: string) => void	--	Callback when the input text changes
placeholder	string	--	Placeholder text in the input
label	string	--	Label text displayed above the input
error	string	--	Error message; applies error styling when set
disabled	boolean	false	Disable the input
size	"sm" \| "md" \| "lg"	"md"	Size of the input

Accessibility

Uses role="combobox" on the input with aria-expanded and aria-autocomplete="list".
The dropdown uses role="listbox" with role="option" items and aria-selected.
Arrow keys navigate options, Enter selects, Escape closes the dropdown.
Focus ring is visible when navigating with keyboard.
Label is associated with the input for screen reader announcement.

← Alert Avatar →