Free
Pro

Input Autocomplete

A wrapper component that combines an input field with a native HTML datalist for autocomplete suggestions. Pass options as content children inside the component.

free

Basic Example

Provide a unique string to the suggestions input. This binds the input field to the datalist element internally. Include <option> elements as children.



HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add input-autocomplete

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add input-autocomplete
// Paths are relative to aliases.components (default: src/app/components)
import { InputAutocompleteComponent } from './input-autocomplete/input-autocomplete.component';

@Component({
  selector: 'app-your-component',
  imports: [
    InputAutocompleteComponent
  ],
  template: `...`
})
export class YourComponent {}

API for input-autocomplete — generated from JSDoc in the library source.

API reference for input-autocomplete
APIMemberTypeDefaultDescription
base-input-autocompletesuggestionsstring''A unique ID string to link the input list attribute with the datalist id.