Back to Components

List Component

Basic

List

Selected Value

Empty

Empty with Custom Text

Behavior

<Empty>

Auto-Height

Without maxVisibleItems

Selected Value

Custom Item Rendering

Custom Snippets

Selected Value

Multi-Select

Multi-Select List

Selected Values

Multi-Select with Custom Items

Use Space to toggle selection

Checkboxes

List with Checkboxes

Selected Values

Pre-selected with Custom Rendering

JavaScript and Svelte pre-selected

Static API Data

Load data from an API once on component mount with optional static filtering.

List (API Data)

Selected Value

All Countries

No data

Data loaded automatically on mount

North America Only (Static Filter)

No data

Filtered to North America using static searchTerm

Features

Key Features:

  • Keyboard Navigation: Arrow keys navigate, Space toggles selection, Enter submits form
  • Multi-Select Support: Select multiple items with highlighting or checkboxes
  • Checkbox Mode: `showCheckboxes=true` enables visual checkboxes with no selection highlighting
  • Custom Rendering: Use snippets to customize how items are displayed
  • Auto-scroll: Focused item automatically scrolls into view
  • Custom Scrollbar: Styled scrollbar with drag support
  • API Integration: Built-in support for fetching data from APIs
  • Search Support: Optional search-as-you-type functionality
  • Transform Function: Map API responses to the required format
  • Configurable Height: Set max visible items and item height
  • Selection Callback: Get notified when items are selected
  • Loading States: Built-in loading indicators and error handling

Use Cases

Perfect for:

  • Command Palettes: Search and select commands or actions
  • Data Browsers: Browse through large datasets with scrolling
  • Search Results: Display search results with rich formatting
  • Menu Lists: Navigation menus with custom styling
  • Autocomplete: Type-ahead suggestions with API integration
  • File Browsers: Browse files and folders with metadata
  • User Lists: Display users with avatars and details
  • Inside Select: Will be used internally by Select component for dropdown lists