diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index a76b2f09..dd6e8c40 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2158,6 +2158,8 @@ export interface MultiSelectItem {
| useTitleInItem | let
| No | boolean
| false
| Set to `true` to pass the item to `itemToString` in the checkbox |
| invalid | let
| No | boolean
| false
| Set to `true` to indicate an invalid state |
| invalidText | let
| No | string
| ""
| Specify the invalid state text |
+| warn | let
| No | boolean
| false
| Set to `true` to indicate an warning state |
+| warnText | let
| No | string
| ""
| Specify the warning state text |
| helperText | let
| No | string
| ""
| Specify the helper text |
| label | let
| No | string
| ""
| Specify the list box label |
| id | let
| No | string
| "ccs-" + Math.random().toString(36)
| Set an id for the list box component |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 4f6c0ff1..bcf98cdd 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -5299,6 +5299,26 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "warn",
+ "kind": "let",
+ "description": "Set to `true` to indicate an warning state",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "warnText",
+ "kind": "let",
+ "description": "Specify the warning state text",
+ "type": "string",
+ "value": "\"\"",
+ "isFunction": false,
+ "constant": false,
+ "reactive": false
+ },
{
"name": "helperText",
"kind": "let",
diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx
index 47a96806..41daaa33 100644
--- a/docs/src/pages/components/MultiSelect.svx
+++ b/docs/src/pages/components/MultiSelect.svx
@@ -89,4 +89,28 @@ Use the `itemToString` prop to format the display of individual items.
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
+ />
+
+### Invalid state
+
+
+
+### Warning state
+
+
+
+### Disabled state
+
+
\ No newline at end of file
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 0a51cdbf..8ac9cd93 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -90,6 +90,12 @@
/** Specify the invalid state text */
export let invalidText = "";
+ /** Set to `true` to indicate an warning state */
+ export let warn = false;
+
+ /** Specify the warning state text */
+ export let warnText = "";
+
/** Specify the helper text */
export let helperText = "";
@@ -112,8 +118,9 @@
*/
import { afterUpdate, createEventDispatcher, setContext } from "svelte";
- import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
- import { Checkbox } from "../Checkbox";
+ import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+ import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
+ import Checkbox from "../Checkbox/Checkbox.svelte";
import {
ListBox,
ListBoxField,
@@ -243,6 +250,8 @@
open="{open}"
light="{light}"
size="{size}"
+ warn="{warn}"
+ warnText="{warnText}"
class="bx--multi-select {filterable && 'bx--combo-box'}
{filterable && 'bx--multi-select--filterable'}
{invalid && 'bx--multi-select--invalid'}
@@ -252,6 +261,11 @@
{#if invalid}
{/if}
+ {#if !invalid && warn}
+
+ {/if}
{/if}
- {#if !inline && !invalid && helperText}
+ {#if !inline && !invalid && !warn && helperText}