Hristo313 · Nov 4, 2026
diff --git a/samples/inputs/combo/disabled/README.md b/samples/inputs/combo/disabled/README.md
@@ -0,0 +1,50 @@
+This folder contains implementation of React application with example of Disabled feature using [Combo](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/combo/disabled" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+cd ./igniteui-react-examples
+git checkout master
+cd ./samples/inputs/combo/disabled
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install
+npm start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/inputs/combo/disabled/index.html b/samples/inputs/combo/disabled/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Combo Disabled</title>
+    <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/samples/inputs/combo/disabled/package.json b/samples/inputs/combo/disabled/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "react-combo-disabled",
+  "description": "This project provides an example of Combo disabled using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "vite --port 4200",
+    "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "^2.2.1",
+    "igniteui-react": "19.9.0",
+    "igniteui-react-core": "19.6.0",
+    "igniteui-webcomponents": "~7.4.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.7.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "@vitest/browser": "^5.0.2",
+    "typescript": "^5.9.3",
+    "vite": "^8.3.1",
+    "vitest": "^5.0.2",
+    "vitest-canvas-mock": "^1.2.0",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/inputs/combo/disabled/src/index.css b/samples/inputs/combo/disabled/src/index.css
@@ -0,0 +1,43 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.states {
+    display: grid;
+    grid-template-columns: max-content repeat(2, minmax(0, 17.4375rem));
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    column-gap: 1.75rem;
+    row-gap: 1.5rem;
+}
+
+.states igc-combo {
+    width: 100%;
+}
+
+.group-start {
+    margin-top: 1.5rem;
+}
+
+.state-label {
+    font: 400 13px / 20px "Aktiv Grotesk", sans-serif;
+    letter-spacing: 0.3px;
+    color: var(--ig-gray-600);
+}
+
+.state-column {
+    justify-self: center;
+}
+
+/* the list shows a group header and three options */
+.states igc-combo {
+    --item-count: 4;
+}
diff --git a/samples/inputs/combo/disabled/src/index.tsx b/samples/inputs/combo/disabled/src/index.tsx
@@ -0,0 +1,61 @@
+import { Fragment } from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrCombo } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+interface Country {
+    id: string;
+    name: string;
+    region: string;
+}
+
+const countries: Country[] = [
+    { id: 'BY', name: 'Belarus', region: 'Europe' },
+    { id: 'BE', name: 'Belgium', region: 'Europe' },
+    { id: 'BG', name: 'Bulgaria', region: 'Europe' },
+];
+
+const rows = [
+    { label: 'Idle', outlined: true, value: [] as string[] },
+    { label: 'Filled', outlined: true, value: ['BY', 'BE'] },
+    { label: 'Idle', outlined: false, value: [] as string[] },
+    { label: 'Filled', outlined: false, value: ['BY', 'BE'] },
+];
+
+export default function ComboDisabled() {
+    const combo = (outlined: boolean, value: string[], disabled: boolean) => (
+        <IgrCombo
+            outlined={outlined}
+            disabled={disabled}
+            placeholder="Country"
+            placeholderSearch="Search"
+            valueKey="id"
+            displayKey="name"
+            groupKey="region"
+            data={countries}
+            value={value}
+        />
+    );
+
+    return (
+        <div className="sample">
+            <div className="states">
+                <span />
+                <span className="state-label state-column">Enabled</span>
+                <span className="state-label state-column">Disabled</span>
+                {rows.map((row, index) => (
+                    <Fragment key={index}>
+                        <span className={`state-label ${index === 2 ? 'group-start' : ''}`}>{row.label}</span>
+                        <div className={index === 2 ? 'group-start' : ''}>{combo(row.outlined, row.value, false)}</div>
+                        <div className={index === 2 ? 'group-start' : ''}>{combo(row.outlined, row.value, true)}</div>
+                    </Fragment>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<ComboDisabled/>);
diff --git a/samples/inputs/combo/disabled/tsconfig.json b/samples/inputs/combo/disabled/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "lib": [
+      "es2020",
+      "dom",
+      "dom.iterable"
+    ],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "types": [
+      "vite/client"
+    ],
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/inputs/combo/disabled/vite.config.js b/samples/inputs/combo/disabled/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'build'
+  },
+  server: {
+    open: false
+  },
+});
diff --git a/samples/inputs/combo/dropdown-size/README.md b/samples/inputs/combo/dropdown-size/README.md
@@ -0,0 +1,50 @@
+This folder contains implementation of React application with example of Dropdown Size feature using [Combo](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/combo/dropdown-size" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+cd ./igniteui-react-examples
+git checkout master
+cd ./samples/inputs/combo/dropdown-size
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install
+npm start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/inputs/combo/dropdown-size/index.html b/samples/inputs/combo/dropdown-size/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Combo Dropdown Size</title>
+    <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/samples/inputs/combo/dropdown-size/package.json b/samples/inputs/combo/dropdown-size/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "react-combo-dropdown-size",
+  "description": "This project provides an example of Combo dropdown size using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "vite --port 4200",
+    "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "^2.2.1",
+    "igniteui-react": "19.9.0",
+    "igniteui-react-core": "19.6.0",
+    "igniteui-webcomponents": "~7.4.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.7.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "@vitest/browser": "^5.0.2",
+    "typescript": "^5.9.3",
+    "vite": "^8.3.1",
+    "vitest": "^5.0.2",
+    "vitest-canvas-mock": "^1.2.0",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}