diff --git a/.changeset/fifty-pears-wash.md b/.changeset/fifty-pears-wash.md
new file mode 100644
index 000000000..3d6df0c24
--- /dev/null
+++ b/.changeset/fifty-pears-wash.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+[MultiSelectMenu] Add optionProps to easily set `variant` on MultiSelectOption
diff --git a/.changeset/serious-starfishes-pump.md b/.changeset/serious-starfishes-pump.md
new file mode 100644
index 000000000..dd1bdb826
--- /dev/null
+++ b/.changeset/serious-starfishes-pump.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+[MultiSelectField] Add optionProps to easily set `variant` on MultiSelectOption
diff --git a/.changeset/tricky-jars-live.md b/.changeset/tricky-jars-live.md
new file mode 100644
index 000000000..361cdbba7
--- /dev/null
+++ b/.changeset/tricky-jars-live.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+[MultiSelectOption] Add variant support (checkbox (default), checkmark, and fill)
diff --git a/packages/svelte-ux/src/lib/components/MultiSelect.svelte b/packages/svelte-ux/src/lib/components/MultiSelect.svelte
index b1e8260c1..3d7c5c967 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelect.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelect.svelte
@@ -25,6 +25,7 @@
   export let inlineSearch = false;
   export let autoFocusSearch = false;
   export let placeholder = 'Search items';
+  export let optionProps: Partial<ComponentProps<MultiSelectOption>> | undefined = undefined;
 
   /** Wrap options in `InfiniteScroll` to amortize rendering of a large number of options */
   export let infiniteScroll = false;
@@ -202,7 +203,13 @@
           {disabled}
           {onChange}
         >
-          <MultiSelectOption {checked} {indeterminate} {disabled} on:change={onChange}>
+          <MultiSelectOption
+            {checked}
+            {indeterminate}
+            {disabled}
+            {...optionProps}
+            on:change={onChange}
+          >
             {label}
           </MultiSelectOption>
         </slot>
@@ -254,7 +261,13 @@
             {disabled}
             {onChange}
           >
-            <MultiSelectOption {checked} {indeterminate} {disabled} on:change={onChange}>
+            <MultiSelectOption
+              {checked}
+              {indeterminate}
+              {disabled}
+              {...optionProps}
+              on:change={onChange}
+            >
               {label}
             </MultiSelectOption>
           </slot>
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
index 28bc4e010..613db039b 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
@@ -29,6 +29,7 @@
   export let max: number | undefined = undefined;
   export let placement: Placement = 'bottom-start';
   export let infiniteScroll = false;
+  export let optionProps: Partial<ComponentProps<MultiSelectOption>> | undefined = undefined;
 
   // TextField props
   export let label = '';
@@ -235,7 +236,13 @@
       let:onChange
     >
       <slot name="option" {option} {label} {value} {checked} {indeterminate} {disabled} {onChange}>
-        <MultiSelectOption {checked} {indeterminate} {disabled} on:change={onChange}>
+        <MultiSelectOption
+          {checked}
+          {indeterminate}
+          {disabled}
+          {...optionProps}
+          on:change={onChange}
+        >
           {label}
         </MultiSelectOption>
       </slot>
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte b/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
index c0664cfdd..6272db825 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
@@ -27,6 +27,7 @@
   export let searchText = '';
   /** Maximum number of options that can be selected  */
   export let max: number | undefined = undefined;
+  export let optionProps: Partial<ComponentProps<MultiSelectOption>> | undefined = undefined;
 
   export let classes: {
     root?: string;
@@ -93,7 +94,13 @@
       let:onChange
     >
       <slot name="option" {option} {label} {value} {checked} {indeterminate} {disabled} {onChange}>
-        <MultiSelectOption {checked} {indeterminate} {disabled} on:change={onChange}>
+        <MultiSelectOption
+          {checked}
+          {indeterminate}
+          {disabled}
+          {...optionProps}
+          on:change={onChange}
+        >
           {label}
         </MultiSelectOption>
       </slot>
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte b/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte
index a81292263..7308b064f 100644
--- a/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte
+++ b/packages/svelte-ux/src/lib/components/MultiSelectOption.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
-  import type { ComponentProps } from 'svelte';
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
 
   import Checkbox from './Checkbox.svelte';
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './theme.js';
+  import Button from './Button.svelte';
+  import { mdiCheck } from '@mdi/js';
 
   export let checked: boolean;
   export let indeterminate = false;
   export let disabled = false;
+  export let variant: 'checkbox' | 'checkmark' | 'fill' = 'checkbox';
 
   export let classes: {
     root?: string;
@@ -15,6 +18,8 @@
     container?: string;
   } = {};
   const settingsClasses = getComponentClasses('MultiSelectOption');
+
+  const dispatch = createEventDispatcher<{ change: null }>();
 </script>
 
 <div
@@ -28,28 +33,59 @@
   role="option"
   aria-selected={checked}
 >
-  <Checkbox
-    bind:checked
-    bind:indeterminate
-    on:change
-    {disabled}
-    classes={{
-      root: 'px-2 rounded hover:bg-surface-content/5',
-      label: 'py-2',
-      ...settingsClasses.checkbox,
-      ...classes.checkbox,
-    }}
-  >
-    <div
+  {#if variant === 'checkbox'}
+    <Checkbox
+      bind:checked
+      bind:indeterminate
+      on:change={() => dispatch('change')}
+      {disabled}
+      classes={{
+        root: 'px-2 rounded hover:bg-surface-content/5',
+        label: 'py-2',
+        ...settingsClasses.checkbox,
+        ...classes.checkbox,
+      }}
+    >
+      <div
+        class={cls(
+          'ml-1 inline-block text-sm text-surface-content',
+          !disabled && 'cursor-pointer',
+          settingsClasses.container,
+          classes.container
+        )}
+      >
+        <slot />
+      </div>
+    </Checkbox>
+  {:else if variant === 'checkmark'}
+    <Button
+      icon={checked ? mdiCheck : 'M0'}
+      {disabled}
+      class={cls(
+        'px-2 text-sm font-normal text-surface-content hover:bg-surface-content/5',
+        'justify-start',
+        settingsClasses.container,
+        classes.container
+      )}
+      on:click={() => dispatch('change')}
+    >
+      <slot />
+    </Button>
+  {:else if variant === 'fill'}
+    <Button
+      {disabled}
       class={cls(
-        'ml-1 inline-block text-sm text-surface-content',
-        !disabled && 'cursor-pointer',
+        'px-2 my-px text-sm font-normal',
+        'justify-start',
         settingsClasses.container,
         classes.container
       )}
+      variant={checked ? 'fill-light' : 'default'}
+      color={checked ? 'primary' : 'default'}
+      on:click={() => dispatch('change')}
     >
       <slot />
-    </div>
-  </Checkbox>
+    </Button>
+  {/if}
   <slot name="actions" />
 </div>
diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte
index b046aaf95..c331b71c6 100644
--- a/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.svelte
@@ -36,6 +36,30 @@
   <MultiSelect {options} {value} on:change={(e) => (value = e.detail.value)} />
 </Preview>
 
+<h2>options variant: checkmark</h2>
+
+<Preview>
+  {value.length} selected
+  <MultiSelect
+    {options}
+    {value}
+    optionProps={{ variant: 'checkmark' }}
+    on:change={(e) => (value = e.detail.value)}
+  />
+</Preview>
+
+<h2>options variant: fill</h2>
+
+<Preview>
+  {value.length} selected
+  <MultiSelect
+    {options}
+    {value}
+    optionProps={{ variant: 'fill' }}
+    on:change={(e) => (value = e.detail.value)}
+  />
+</Preview>
+
 <h2>inlineSearch</h2>
 
 <Preview>
diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte
index 9cb92e585..be0ca3cc3 100644
--- a/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.svelte
@@ -34,6 +34,34 @@
   <MultiSelectField label="Numbers" {options} {value} on:change={(e) => (value = e.detail.value)} />
 </Preview>
 
+<h2>options variants</h2>
+
+<Preview>
+  <div class="grid gap-3">
+    <MultiSelectField
+      label="checkbox (default)"
+      {options}
+      {value}
+      optionProps={{ variant: 'checkbox' }}
+      on:change={(e) => (value = e.detail.value)}
+    />
+    <MultiSelectField
+      label="checkmark"
+      {options}
+      {value}
+      optionProps={{ variant: 'checkmark' }}
+      on:change={(e) => (value = e.detail.value)}
+    />
+    <MultiSelectField
+      label="fill"
+      {options}
+      {value}
+      optionProps={{ variant: 'fill' }}
+      on:change={(e) => (value = e.detail.value)}
+    />
+  </div>
+</Preview>
+
 <h2>disabled</h2>
 
 <Preview>
diff --git a/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte
index d6d0696d3..bbdae0b33 100644
--- a/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.svelte
@@ -41,6 +41,57 @@
   </span>
 </Preview>
 
+<h2>options variants</h2>
+
+<Preview>
+  <div class="inline-grid gap-3">
+    <ToggleButton let:on={open} let:toggleOff transition={false}>
+      {value.length} selected
+      <MultiSelectMenu
+        {options}
+        {value}
+        optionProps={{ variant: 'checkbox' }}
+        on:change={(e) => {
+          // @ts-expect-error
+          value = e.detail.value;
+        }}
+        {open}
+        on:close={toggleOff}
+      />
+    </ToggleButton>
+
+    <ToggleButton let:on={open} let:toggleOff transition={false}>
+      {value.length} selected
+      <MultiSelectMenu
+        {options}
+        {value}
+        optionProps={{ variant: 'checkmark' }}
+        on:change={(e) => {
+          // @ts-expect-error
+          value = e.detail.value;
+        }}
+        {open}
+        on:close={toggleOff}
+      />
+    </ToggleButton>
+
+    <ToggleButton let:on={open} let:toggleOff transition={false}>
+      {value.length} selected
+      <MultiSelectMenu
+        {options}
+        {value}
+        optionProps={{ variant: 'fill' }}
+        on:change={(e) => {
+          // @ts-expect-error
+          value = e.detail.value;
+        }}
+        {open}
+        on:close={toggleOff}
+      />
+    </ToggleButton>
+  </div>
+</Preview>
+
 <h2>inlineSearch</h2>
 
 <Preview>