How do I enable multi-select?

Set selectionMode to 'checkBox' or 'many' to allow multiple item selection.

How do I add custom filtering?

Set filterable = true and use the filtering event to implement custom filter logic.

smart-ui

JavaScript

Angular

Vue

React

Getting Started with React ComboBox 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/combobox/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 ReactDOM from 'react-dom/client';
import { ComboBox, ListItem, ListItemsGroup } from 'smart-webcomponents-react/combobox';

function App() {
	return (
		<div>
			<ComboBox  selectedIndexes={[0]}>
				<ListItem value="1">Affogato</ListItem>
				<ListItem value="2">Americano</ListItem>
				<ListItem value="3">Bicerin</ListItem>
				<ListItem value="4">Breve</ListItem>
				<ListItem value="5">Cappuccino</ListItem>
				<ListItem value="6">Cafe Crema</ListItem>
				<ListItem value="7">Cafe Corretto</ListItem>
				<ListItem value="8">Cafe macchiato</ListItem>
				<ListItem value="9">Cafe mocha</ListItem>
				<ListItem value="10">Cortado</ListItem>
				<ListItem value="11">Cuban espresso</ListItem>
				<ListItem value="12">Espresso</ListItem>
				<ListItem value="13">Eiskaffee</ListItem>
				<ListItem value="14">Frappuccino</ListItem>
				<ListItem value="15">Galao</ListItem>
				<ListItem value="16">Greek frappe coffee</ListItem>
				<ListItem value="17">Iced Coffee</ListItem>
				<ListItem value="18">Instant Coffee</ListItem>
				<ListItem value="19">Latte</ListItem>
				<ListItem value="20">Liqueur coffee</ListItem>
			</ComboBox>
		</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

Set selected value
Programmatically select an item
```
comboBox.selectedValues = ['value1'];
```

Filter items dynamically

Implement custom filtering logic

comboBox.dataSource = items.filter(item => 
  item.label.toLowerCase().includes(searchTerm)
);

Handle selection change

Respond when user selects an item

comboBox.addEventListener('change', (e) => {
  console.log('Selected:', e.detail.value);
});

Troubleshooting

How do I enable multi-select?: Set selectionMode to 'checkBox' or 'many' to allow multiple item selection.
How do I add custom filtering?: Set filterable = true and use the filtering event to implement custom filter logic.

TypeScript Support

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

import type { ComboBox, ComboBoxProps } from 'smart-webcomponents-react/combobox';

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.