React Dropdown Components

The Syncfusion React Dropdowns package is a feature-rich UI collection for dynamic dropdown interactions in React apps.

Setup

To install dropdowns and its dependent packages, use the following command,

npm install @syncfusion/react-dropdowns

React Dropdown List

The Dropdown List component provides a user-friendly interface for selecting a single option from a list of predefined values. It supports rich customization, filtering, and templating features, making it ideal for forms, data filtering, and guided user selections.

Key features

Primitive Data Binding: Bind the Dropdown List to simple arrays of strings or numbers for straightforward use cases without complex data structures.
Grouping: Organize Dropdown List items into logical categories using the groupBy property, improving navigation and discoverability in large datasets.
Filtering: Enable the filterable property to allow users to search and narrow down options dynamically, with real-time updates to the list as they type.
Grouping with Filtering: Combine grouping and filtering to enhance usability, especially when dealing with extensive or categorized data.
Templates: Customize the Dropdown List appearance using various template options:
- Item Template: Use itemTemplate to style individual items or display additional information.
- Header Template: Add custom content at the top of the Dropdown List using headerTemplate.
- Footer Template: Include extra information or actions at the bottom using footerTemplate.
- Value Template: Style the selected value using valueTemplate for a personalized display.
Label Mode: Control how labels or placeholders appear with the labelMode property. Available modes include Never, Always, and Auto.
Sorting: Control item order using the sortOrder property.
Popup Customization: Configure popupSettings (width, height, zIndex, position, offset, collision).
Clear Button: Show a clear icon to reset selection via clearButton.
Sizes and Variants: Adjust UI with size (Small, Medium, Large) and variant (Standard, Outlined, Filled).

Usage

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

const data = [
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' },
  { text: 'Cherry', value: 'cherry' }
];

export default function App() {
  return (
    <DropDownList
      id="fruits"
      dataSource={data}
      fields={{ text: 'text', value: 'value' }}
      placeholder="Select a fruit"
    />
  );
}

Trusted by the world's leading companies

Support

Product support is available through following mediums.

Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
Live chat

Changelog

Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.

License and copyright

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for React UI components, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICENSE FILE for more info.

@syncfusion/react-dropdowns