diff --git a/package-lock.json b/package-lock.json
index 8adda6aa..4590bc21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -82,6 +82,7 @@
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-select-event": "^5.5.1",
"sass": "^1.75.0",
"sass-loader": "^14.2.0",
"storybook": "^8.3.5",
@@ -18110,6 +18111,15 @@
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
+ "node_modules/react-select-event": {
+ "version": "5.5.1",
+ "resolved": "https://registry.npmjs.org/react-select-event/-/react-select-event-5.5.1.tgz",
+ "integrity": "sha512-goAx28y0+iYrbqZA2FeRTreHHs/ZtSuKxtA+J5jpKT5RHPCbVZJ4MqACfPnWyFXsEec+3dP5bCrNTxIX8oYe9A==",
+ "dev": true,
+ "dependencies": {
+ "@testing-library/dom": ">=7"
+ }
+ },
"node_modules/react-signature-canvas": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/react-signature-canvas/-/react-signature-canvas-1.0.6.tgz",
@@ -34619,6 +34629,15 @@
"use-isomorphic-layout-effect": "^1.1.2"
}
},
+ "react-select-event": {
+ "version": "5.5.1",
+ "resolved": "https://registry.npmjs.org/react-select-event/-/react-select-event-5.5.1.tgz",
+ "integrity": "sha512-goAx28y0+iYrbqZA2FeRTreHHs/ZtSuKxtA+J5jpKT5RHPCbVZJ4MqACfPnWyFXsEec+3dP5bCrNTxIX8oYe9A==",
+ "dev": true,
+ "requires": {
+ "@testing-library/dom": ">=7"
+ }
+ },
"react-signature-canvas": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/react-signature-canvas/-/react-signature-canvas-1.0.6.tgz",
diff --git a/package.json b/package.json
index 49d8b84e..54b52eb5 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,7 @@
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-select-event": "^5.5.1",
"sass": "^1.75.0",
"sass-loader": "^14.2.0",
"storybook": "^8.3.5",
diff --git a/src/components/formio/select.tsx b/src/components/formio/select.tsx
index bf652d01..06d732c9 100644
--- a/src/components/formio/select.tsx
+++ b/src/components/formio/select.tsx
@@ -1,5 +1,6 @@
import {useField} from 'formik';
import React from 'react';
+import {ReactNode} from 'react';
import ReactSelect from 'react-select';
import type {
GroupBase,
@@ -35,6 +36,12 @@ export interface SelectProps<
onChange?: (event: {target: {name: string; value: ValueType}}) => void;
}
+export interface Option {
+ value: string;
+ label: ReactNode;
+ description?: string;
+}
+
function isOption