How do I set a default selected value?

Set the selectedValues property to an array containing the default value(s): selectedValues = ['defaultValue'].

How do I disable specific items?

Add disabled: true to items in your dataSource that should not be selectable.

smart-ui

JavaScript

Angular

Vue

React

Getting Started with React DropDownList Component

Smart UI React targets React 18+ and current Node LTS for tooling; use TypeScript templates when you want typed props and events.

Demo source (Smart UI repo): react/source/dropdownlist/basic/App.jsx

1 Create a Vite + React + TypeScript app

npm create vite@latest my-smart-app -- --template react-ts

```
cd my-smart-app
```
then
```
npm install
```

2 Install Smart UI for React

npm install smart-webcomponents-react

3 Import styles and render the component

Open src/App.tsx (or App.jsx if you chose JavaScript). The snippet below matches Smart UI React demos for this widget:

import 'smart-webcomponents-react/source/styles/smart.default.css';
import './App.css';
import React from "react";
import { DropDownList, ListItem } from 'smart-webcomponents-react/dropdownlist';

function App() {
  const handleChange = (e) => {
    console.log(e.detail);
  };

  return (
    <div>
      <DropDownList
        placeholder='Période courante'
        onChange={handleChange}
      >
        <ListItem value="12M">12 derniers mois</ListItem>
        <ListItem value="6M">6 derniers mois</ListItem>
        <ListItem value="3M">3 derniers mois</ListItem>
        <ListItem value="4S">4 dernières semaines</ListItem>
        <ListItem value="custom">Période personnalisée</ListItem>
      </DropDownList>
    </div>
  );
}

export default App;

4 Run the dev server

npm run dev

Open the URL Vite prints (often http://localhost:5173/).

Alternative: Next.js

Create an app with npx create-next-app@latest (Pages Router or App Router). Install the same package (npm install smart-webcomponents-react), then reuse the imports and default export from step 3 in pages/_app.tsx, the App Router root app/layout.tsx, or your top-level layout component so styles and the widget tree load once.

Common Use Cases

Populate from API

Load dropdown options from a REST endpoint

const options = await fetch('/api/options').then(r => r.json());
dropDownList.dataSource = options;

Get selected value
Retrieve the currently selected item
```
const selected = dropDownList.selectedValues[0];
```

Troubleshooting

How do I set a default selected value?: Set the selectedValues property to an array containing the default value(s): selectedValues = ['defaultValue'].
How do I disable specific items?: Add disabled: true to items in your dataSource that should not be selectable.

TypeScript Support

Types ship with smart-webcomponents-react. Import the component and prop types:

import type { DropDownList, DropDownListProps } from 'smart-webcomponents-react/dropdownlist';

The generated wrappers expose on* callbacks (for example onChange) whose arguments are standard DOM Event values unless the widget typings narrow them further.

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.