diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 8f706c7b79..e7d55a36a4 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3208,12 +3208,14 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------------------------------- |
-| value | No | let | No | string | number | "" | Specify the option value |
-| text | No | let | No | string | "" | Specify the option text |
-| hidden | No | let | No | boolean | false | Set to `true` to hide the option |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the option |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ----------------------------------------- |
+| value | No | let | No | string | number | "" | Specify the option value |
+| text | No | let | No | string | "" | Specify the option text |
+| hidden | No | let | No | boolean | false | Set to `true` to hide the option |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the option |
+| class | No | let | No | string | undefined | Specify the class of the `option` element |
+| style | No | let | No | string | undefined | Specify the style of the `option` element |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index c7102e9077..dbc78008e9 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -10452,6 +10452,28 @@
"isRequired": false,
"constant": false,
"reactive": false
+ },
+ {
+ "name": "class",
+ "kind": "let",
+ "description": "Specify the class of the `option` element",
+ "type": "string",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "style",
+ "kind": "let",
+ "description": "Specify the style of the `option` element",
+ "type": "string",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
}
],
"moduleExports": [],
diff --git a/src/Select/SelectItem.svelte b/src/Select/SelectItem.svelte
index e009ba6247..a33049248c 100644
--- a/src/Select/SelectItem.svelte
+++ b/src/Select/SelectItem.svelte
@@ -14,6 +14,20 @@
/** Set to `true` to disable the option */
export let disabled = false;
+ let className = undefined;
+
+ /**
+ * Specify the class of the `option` element
+ * @type {string}
+ */
+ export { className as class };
+
+ /**
+ * Specify the style of the `option` element
+ * @type {string}
+ */
+ export let style = undefined;
+
import { getContext, onMount } from "svelte";
const id = "ccs-" + Math.random().toString(36);
@@ -38,8 +52,8 @@
hidden="{hidden}"
selected="{selected}"
class:bx--select-option="{true}"
- class="{$$restProps.class}"
- style="{$$restProps.style}"
+ class="{className}"
+ style="{style}"
>
{text || value}
diff --git a/tests/Select.test.svelte b/tests/Select.test.svelte
index d8421e0a7b..cc81277745 100644
--- a/tests/Select.test.svelte
+++ b/tests/Select.test.svelte
@@ -8,7 +8,7 @@