Create Horizontal ListBox with Syncfusion ListBox Component in React.

This article explains how to create a horizontal ListBox using Syncfusion’s ListBox component in a React application. The React ListBox component allows users to select one or more items from a list. By customizing the CSS, we can display the ListBox items horizontally.

Prerequisites

Ensure you have the following installed:

Node.js
A package manager like npm or Yarn
Create React App (optional)

Step 1: Install Syncfusion ListBox Package

First, you need to install the Syncfusion ListBox package for React. You can do this using npm or Yarn:

npm install @syncfusion/ej2-react-dropdowns --save
# or
yarn add @syncfusion/ej2-react-dropdowns

Step 2: Import the ListBox Component

In your React component file, import the ListBoxComponent from the Syncfusion package:

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

Step 3: Define the CSS for Horizontal Display

Create a CSS file named index.css and include the following styles to arrange the ListBox items horizontally:

.e-listbox-wrapper {
  width: 50% !important;
}
.e-listbox-wrapper ul {
  display: flex;
  list-style: none;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px !important;
}
li {
  flex-basis: 10%;
  white-space: nowrap;
  width: auto;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  position: relative;
}
.custom-list-item {
  overflow: hidden;
}

Step 4: Create the ListBox Component

In your React component, create the ListBoxComponent and pass the data source to it:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import './index.css';
import * as data from './dataSource.json';

const Default = () => {
    const listData = data["info"];
    return (
        <div className='col-lg-12 control-section'>
            <div id='listbox'>
                <h4>Select your favorite car</h4>
                <ListBoxComponent dataSource={listData}/>
            </div>
        </div>
    );
};

export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />);

Step 5: Render the Component

Make sure to render the Default component in your application’s root element:

const root = createRoot(document.getElementById('sample'));
root.render(<Default />);

Output Sample

Refer to the working sample for additional details and implementation: Horizontal ListBox Sample.

Additional References

For more information on Syncfusion’s ListBoxComponent and other features, refer to the following resources:

By following these steps, you can successfully integrate a horizontal ListBox into your React application using Syncfusion’s components and customize it according to your design requirements.

Conclusion

We hope you enjoyed learning about how to create a Horizontal ListBox with the Syncfusion ListBox Component in React.

You can refer to our React ListBox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React ListBox example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)