UI Skillbook
2

Autocomplete

A text input that suggests completions while still accepting whatever the person types.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-autocomplete and follow the Siteplane Autocomplete skill it prints for this task.

Paste this into your agent.

Autocomplete fits answers people type themselves with help from suggestions: job titles, tags, search queries, city names. The form submits whatever they type, even when no suggestion matches.

Install

bashnpx shadcn@4.18.0 add @siteplane/autocomplete

Import it from @/siteplane/components/autocomplete. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Combobox: Pick Combobox when only values from the list are allowed.
  • vs Input: Pick plain Input when you have no useful suggestions.
  • vs Select: Pick Select for a short fixed list that rejects free text.

Rules

  • Treat value as a plain string holding arbitrary text. It does not point to a selected item.
  • Use itemToStringValue for object items so selecting one fills the input with the right text.
  • Cap long lists with limit and report the remainder through AutocompleteStatus using useAutocompleteFilter.
  • Render AutocompleteEmpty for no matches. Your app code owns async fetching and errors.
  • Set size and variant on AutocompleteInput, and place it in a Field with a name to submit.

Reference

  • Autocomplete docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Forms & selection. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-autocomplete

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Form Field Validation Timingby UI Skillbook

Validate at the right moment — not on every keystroke, not only on submit.

Forms

Siteplane Attachmentby UI Skillbook

A card for a file or image attached to a message or draft, with upload states and actions.

Siteplane UI

Siteplane Calendarby UI Skillbook

An inline month grid for picking a single date, several dates or a range, with unavailable-day rules.

Siteplane UI

Siteplane Comboboxby UI Skillbook

A searchable picker that filters known options as you type, single or multi-select with chips.

Siteplane UI

Back to Siteplane UI