Source

Command Palette

Search for a command to run...

Autocomplete

Text input with searchable dropdown suggestions

About Autocomplete

A text input component that displays filtered options or fetched results in a dropdown. Supports static local options with client-side filtering, and remote server-side fetching with debouncing. Can operate in controlled or uncontrolled modes.

Installation

Import the Autocomplete component from LSD:
import { Autocomplete } from '@nipsys/lsd'

export default function MyComponent() {
  return <Autocomplete />
}

Usage

The simplest form of the component with default styling.
Basic

Variants

Component variants for different visual styles and use cases.
Ghost

Outlined

Underlined

Sizes

Component sizes for different contexts and visual hierarchy.
Sizes

Features

Additional features and capabilities of the component.
Clearable

Disabled

Error

Icon

API Reference

Autocomplete

options
Array of options for client-side filtering.
Type: AutocompleteOption[]
onOptionsFetch
Fetches options asynchronously based on search text.
Type: (searchText: string) => Promise<AutocompleteOption[]>
placeholder
Placeholder text displayed when no value is selected.
Type: string
emptyText
Text displayed when no options match the search.
Type: string
loadingText
Text displayed while options are being fetched.
Type: string
className
Optional className for custom styling.
Type: string
onValueChange
Callback fired when the selected value changes.
Type: (value: string) => void
onClear
Callback fired when the clear button is clicked.
Type: () => void
disabled
Disables the autocomplete input.
Type: boolean
label
Label shown above the input field.
Type: string
size
Size of the autocomplete component.
Type: SizeVariant
icon
Icon element displayed at the end of the input.
Type: React.ReactNode
error
Displays the input in error state.
Type: boolean
variant
Visual style variant for the input border.
Type: BorderVariant
clearable
Shows a clear button when a value is selected.
Type: boolean
value
Currently selected value string for controlled mode.
Type: string
isLoading
External loading state override for async fetching.
Type: boolean

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate to the autocomplete input• ArrowDown - Open dropdown and move to first option• ArrowUp - Move to previous option in dropdown• Enter - Select the highlighted option• Escape - Close dropdown without selecting
ARIA Attributes
Proper ARIA attributes for screen readers
• role="combobox" is managed by Radix Popover• aria-expanded indicates dropdown open state• aria-controls links input to dropdown content• aria-activedescendant identifies selected option
Focus States
Visible focus indicators for keyboard users
• Focus managed by Radix Popover component. First option receives focus when dropdown opens. Focus returns to input when option selected or dropdown closes. Clicking outside closes dropdown and returns focus to input.
Button