Implementing Syncfusion React ListBox

Documentation Guide

Getting Started

• React app setup (Vite/Create React App)
• Installing Syncfusion packages
• CSS imports and theming
• Basic ListBox component creation
• Running the application

Selection & Events

• Single selection mode
• Multiple selection mode
• Selection events and handlers
• Programmatic selection management
• Working with selected items

Data Binding & Structure

• Array and object data binding
• Text and value properties
• Data source configuration
• Grouping data
• Hierarchical data structures

Custom Templates & Icons

• Icon rendering in items
• Custom item templates
• HTML content rendering
• Template variables and syntax
• Conditional rendering

Advanced Features

• Drag and drop functionality
• Filtering and search
• Sorting and grouping
• Dual ListBox (transfer list)
• Scroller configuration
• Item enable/disable

Styling & Appearance

• CSS class customization
• Theme integration
• Styling items and groups
• Responsive design
• Custom CSS variables

Accessibility

• WCAG 2.2 compliance
• Keyboard navigation
• ARIA attributes
• Screen reader support
• RTL (right-to-left) support

How-To Guides

• Add items dynamically
• Select items programmatically
• Enable/disable items
• Filter ListBox data
• Enable scroller for long lists
• Form integration & submission

Dual ListBox (Transfer)

• Two-way item transfer between lists
• Toolbar operations (move up/down, transfer)
• Permission and skill assignment patterns
• Custom styling and responsive design
• Capacity limits and validation

API Reference

• Complete list of all properties with types and defaults
• All public methods with parameter details and return types
• All events with full event argument interfaces
• Sub-interfaces:

  SelectionSettingsModel

  ,

  ToolbarSettingsModel

  ,

  FieldSettingsModel

  ,

  SourceDestinationModel

Quick Start Example

import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import './App.css';

function App() {
  const data = [
    { text: 'JavaScript', id: '1' },
    { text: 'TypeScript', id: '2' },
    { text: 'React', id: '3' },
    { text: 'Vue', id: '4' },
    { text: 'Angular', id: '5' }
  ];

  const handleChange = (e) => {
    console.log('Selected:', e.value);
  };

  return (
    <ListBoxComponent 
      dataSource={data}
      fields={{ text: 'text', value: 'id' }}
      selectionSettings={{ mode: 'Single' }}
      change={handleChange}
    />
  );
}

export default App;

Common Patterns

Multiple Selection

<ListBoxComponent 
  dataSource={data}
  selectionSettings={{ mode: 'Multiple' }}
/>

Checkbox Selection

Requires injecting

CheckBoxSelection

service.

import { ListBoxComponent, SelectionSettingsModel, Inject, CheckBoxSelection } from '@syncfusion/ej2-react-dropdowns';

const selectionSettings: SelectionSettingsModel = { showCheckbox: true };

<ListBoxComponent dataSource={data} selectionSettings={selectionSettings}>
  <Inject services={[CheckBoxSelection]} />
</ListBoxComponent>

With Search/Filter

<ListBoxComponent 
  dataSource={data}
  allowFiltering={true}
  filterBarPlaceholder="Search items"
/>

Custom Item Template

const itemTemplate = (props) => {
  return (
    <div>
      <span className="icon">{props.icon}</span>
      <span>{props.text}</span>
    </div>
  );
}

<ListBoxComponent 
  dataSource={data}
  itemTemplate={itemTemplate}
/>

Grouping Items

<ListBoxComponent 
  dataSource={groupedData}
  fields={{ text: 'text', groupBy: 'category' }}
/>

Key Props & Configuration

dataSource

[{ text: 'Item', id: '1' }]

fields

{ text: 'name', value: 'id' }

selectionSettings

showCheckbox: true

CheckBoxSelection

{ mode: 'Multiple' }

{ showCheckbox: true }

allowFiltering

true

allowDragAndDrop

true

itemTemplate

enabled

true

false

Common Use Cases

1. Select Framework - Single selection from framework list with icons
2. Multi-Select Languages - Multiple selection with search filter
3. Skill Picker - Custom templates with badges and descriptions
4. Drag-Drop Transfer - Dual ListBox for moving items between lists
5. Grouped Categories - Organizing items by category with group headers
6. Searchable Item List - Large list with filter functionality
7. Accessible Menu - Full keyboard navigation and screen reader support

Next Steps

1. Start with Getting Started for initial setup
2. Choose your use case (selection mode, templates, features)
3. Read relevant reference for implementation details
4. Copy code examples and customize for your needs
5. Use Accessibility guide for WCAG compliance