diff --git a/packages/css/src/suggestion.css b/packages/css/src/suggestion.css
index 6911ddb701..81a806e8d2 100644
--- a/packages/css/src/suggestion.css
+++ b/packages/css/src/suggestion.css
@@ -203,6 +203,10 @@
         @composes ds-focus--visible--middle from './base.css';
       }
     }
+    & > u-option[data-creatable]::after {
+      content: 'Legg til ' var(--dsc-suggestion-creatable);
+    }
+
     [data-multiple] & {
       & > u-option:not([data-empty]) {
         padding-inline-start: calc(var(--dsc-suggestion-option-padding) + var(--dsc-suggestion-option-checkmark-size) + var(--dsc-suggestion-option-gap));
diff --git a/packages/web/index.html b/packages/web/index.html
index c04f4efd7b..af70634e56 100644
--- a/packages/web/index.html
+++ b/packages/web/index.html
@@ -23,6 +23,28 @@ <h1 class="ds-heading" data-size="lg">Test webcomponents</h1>
     <br>
     <br>
 
+    <ds-field class="ds-field" style="width: 200px">
+      <label>Label</label>
+      <ds-suggestion
+        class="ds-suggestion"
+        data-multiple
+        data-creatable='Legg til "{value}"'
+      >
+        <input type="search" class="ds-input">
+        <button type="button" aria-expanded="false" aria-label="Valg"></button>
+        <button type="reset" aria-label="Tøm"></button>
+        <u-datalist>
+          <u-option></u-option>
+          <u-option value="option-1">Option 1</u-option>
+          <u-option value="option-2">Option 2</u-option>
+          <u-option value="option-3">Option 3</u-option>
+        </u-datalist>
+      </ds-suggestion>
+    </ds-field>
+
+    <br>
+    <br>
+
     <h2 class="ds-heading">data-clickdelegatefor</h2>
     <ds-field class="ds-card" data-clickdelegatefor="target">
       <input id="target" class="ds-input" type="checkbox">
@@ -224,23 +246,6 @@ <h2>Oppsummering</h2>
     <br>
     <br>
 
-    <ds-field class="ds-field" style="width: 200px">
-      <label>Label</label>
-      <ds-suggestion class="ds-suggestion" data-multiple>
-        <input type="search" class="ds-input">
-        <button type="button" aria-expanded="false" aria-label="Valg"></button>
-        <button type="reset" aria-label="Tøm"></button>
-        <u-datalist>
-          <u-option value="option-1">Option 1</u-option>
-          <u-option value="option-2">Option 2</u-option>
-          <u-option value="option-3">Option 3</u-option>
-        </u-datalist>
-      </ds-suggestion>
-    </ds-field>
-
-    <br>
-    <br>
-
     <fieldset class="ds-fieldset">
       <legend>Velg Alternativ</legend>
       <p data-field="description">Introtekst</p>
diff --git a/packages/web/src/suggestion/suggestion.ts b/packages/web/src/suggestion/suggestion.ts
index 7a1662461d..b7eae6e457 100644
--- a/packages/web/src/suggestion/suggestion.ts
+++ b/packages/web/src/suggestion/suggestion.ts
@@ -21,12 +21,14 @@ export class DSSuggestionElement extends UHTMLComboboxElement {
   connectedCallback() {
     super.connectedCallback();
     this._unmutate = onMutation(this, render, { childList: true }); // .control and .list are direct children of the custom element
+    on(this, 'comboboxafterselect input', handleCreatable);
     on(this, 'toggle', polyfillToggleSource, QUICK_EVENT);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this._unmutate?.();
     this._unmutate = undefined;
+    off(this, 'comboboxafterselect input', handleCreatable);
     off(this, 'toggle', polyfillToggleSource, QUICK_EVENT);
   }
 }
@@ -42,6 +44,18 @@ const render = (self: DSSuggestionElement) => {
   if (datalist) attr(datalist, 'data-is-floating', 'true'); // identifier for css to toggle opacity when it is placed by floating-ui.
 };
 
+const handleCreatable = (event: Event) => {
+  const self = event.currentTarget;
+  const creatable = self.getAttribute('data-creatable');
+  const value = self.control.value.trim();
+  const add = self.list.options[0];
+
+  add.hidden = !value || self.values.includes(value);
+  add.value = value;
+  add.label = value;
+  add.textContent = creatable.replace('{value}', value);
+};
+
 // Since showPopover({ source }) is not supported in all browsers yet:
 const polyfillToggleSource = (event: Partial<ToggleEvent>) => {
   const self = event.currentTarget as DSSuggestionElement;