Autocomplete Field

The Autocomplete field provides a searchable dropdown that helps users find and select options from a large list. It offers an enhanced user experience with type-ahead functionality and filtering.

Configuration

Basic Settings

• Field Label: The label displayed above the input field
• Placeholder: Placeholder text shown when the field is empty
• Required: Whether the field must be filled before submission
• Multiple: Allow selection of multiple values
• Options: Array of selectable options

Data Source Options

Static Options

Define options directly in the field configuration:

options: [
  { value: "option1", label: "Option 1" },
  { value: "option2", label: "Option 2" },
  { value: "option3", label: "Option 3" }
]

Remote Source

Load options from an API endpoint:

{
  type: "autocomplete",
  name: "country",
  label: "Select Country",
  remoteSource: true,
  apiEndpoint: "/api/countries",
  searchable: true
}

Advanced Features

• Searchable: Enable type-ahead search functionality
• Async Loading: Load options dynamically as user types
• Custom Filtering: Implement custom filter logic
• Grouping: Group related options together
• Free Solo: Allow users to enter custom values not in the list

Example Usage

Basic Autocomplete

{
  type: "autocomplete",
  name: "category",
  label: "Product Category",
  placeholder: "Start typing to search...",
  required: true,
  options: [
    { value: "electronics", label: "Electronics" },
    { value: "clothing", label: "Clothing" },
    { value: "books", label: "Books" }
  ]
}

Multiple Selection

{
  type: "autocomplete",
  name: "tags",
  label: "Tags",
  placeholder: "Select multiple tags",
  multiple: true,
  options: [
    { value: "urgent", label: "Urgent" },
    { value: "important", label: "Important" },
    { value: "review", label: "Review" }
  ]
}

Remote Data Source

{
  type: "autocomplete",
  name: "users",
  label: "Assign to User",
  remoteSource: true,
  apiEndpoint: "/api/users/search",
  searchable: true,
  debounceTime: 300
}

Best Practices

1. Use autocomplete for lists with more than 5-7 options
2. Implement debouncing for remote sources to reduce API calls
3. Provide clear labels and placeholder text
4. Consider using grouping for large lists with categories
5. Enable search functionality for better user experience
6. Set appropriate loading states for remote data
7. Handle errors gracefully when loading remote data fails