diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss
index acb964f9836..00d6afc1ecc 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss
@@ -14,7 +14,7 @@
   display: block;
 }
 
-:host([active]) {
+:host([data-active]) {
   --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
 }
 
@@ -41,7 +41,7 @@
   padding-inline: var(--sbb-option-padding-inline);
   color: var(--sbb-option-color);
 
-  :host([active]) & {
+  :host([data-active]) & {
     @include sbb.focus-outline;
 
     border-radius: var(--sbb-option-border-radius);
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts
index dcd04e83ec4..d809b6b7e77 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts
@@ -25,7 +25,7 @@ describe(`sbb-autocomplete-grid-option`, () => {
       <sbb-autocomplete-grid-option
         style=${styleMap(style)}
         icon-name=${iconName || nothing}
-        ?active=${active && i === 0}
+        ?data-active=${active && i === 0}
         ?disabled=${disabled && i === 0}
         value=${`Value ${i + 1}`}
         >Value ${i + 1}</sbb-autocomplete-grid-option
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/readme.md b/src/elements/autocomplete-grid/autocomplete-grid-option/readme.md
index 6400fc58d63..f1f0de1ddb5 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/readme.md
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/readme.md
@@ -38,15 +38,13 @@ at the component start using the `iconName` property or via custom content using
 
 Like the native `option`, the component has a `value` property.
 
-The `selected`, `disabled` and `active` properties are connected to the self-named states.
+The `selected` and `disabled` properties are connected to the self-named states.
 When disabled, the selection via click is prevented.
 If the `sbb-autocomplete-grid-option` is nested in a `sbb-autocomplete-grid-optgroup` component, it inherits from the parent the `disabled` state.
 
 ```html
 <sbb-autocomplete-grid-option value="value" selected>Option label</sbb-autocomplete-grid-option>
 
-<sbb-autocomplete-grid-option value="value" active>Option label</sbb-autocomplete-grid-option>
-
 <sbb-autocomplete-grid-option value="value" disabled>Option label</sbb-autocomplete-grid-option>
 ```
 
@@ -86,13 +84,12 @@ which is needed to correctly set the `aria-activedescendant` on the related `inp
 
 ## Properties
 
-| Name       | Attribute   | Privacy | Type                   | Default | Description                                                                                                                      |
-| ---------- | ----------- | ------- | ---------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `active`   | `active`    | public  | `boolean \| undefined` |         | Whether the option is currently active.                                                                                          |
-| `disabled` | `disabled`  | public  | `boolean`              | `false` | Whether the component is disabled.                                                                                               |
-| `iconName` | `icon-name` | public  | `string \| undefined`  |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
-| `selected` | `selected`  | public  | `boolean`              |         | Whether the option is selected.                                                                                                  |
-| `value`    | `value`     | public  | `string`               |         | Value of the option.                                                                                                             |
+| Name       | Attribute   | Privacy | Type                  | Default | Description                                                                                                                      |
+| ---------- | ----------- | ------- | --------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `disabled` | `disabled`  | public  | `boolean`             | `false` | Whether the component is disabled.                                                                                               |
+| `iconName` | `icon-name` | public  | `string \| undefined` |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
+| `selected` | `selected`  | public  | `boolean`             |         | Whether the option is selected.                                                                                                  |
+| `value`    | `value`     | public  | `string`              |         | Value of the option.                                                                                                             |
 
 ## Events
 
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
index aebd7ced750..50e0d663b7d 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
@@ -208,30 +208,30 @@ describe(`sbb-autocomplete-grid`, () => {
     await sendKeys({ press: 'ArrowDown' });
     await sendKeys({ press: 'ArrowDown' });
     await waitForLitRender(element);
-    expect(optTwo).to.have.attribute('active');
+    expect(optTwo).to.have.attribute('data-active');
     expect(buttonTwo).not.to.have.attribute('data-focus-visible');
     expect(buttonThree).not.to.have.attribute('data-focus-visible');
     expect(input).to.have.attribute('aria-activedescendant', 'option-2');
 
     await sendKeys({ press: 'ArrowRight' });
     await waitForLitRender(element);
-    expect(optTwo).not.to.have.attribute('active');
+    expect(optTwo).not.to.have.attribute('data-active');
     expect(buttonTwo).to.have.attribute('data-focus-visible');
     expect(buttonThree).not.to.have.attribute('data-focus-visible');
     expect(input).to.have.attribute('aria-activedescendant', 'button-2');
 
     await sendKeys({ press: 'ArrowRight' });
     await waitForLitRender(element);
-    expect(optTwo).not.to.have.attribute('active');
+    expect(optTwo).not.to.have.attribute('data-active');
     expect(buttonTwo).not.to.have.attribute('data-focus-visible');
     expect(buttonThree).to.have.attribute('data-focus-visible');
     expect(input).to.have.attribute('aria-activedescendant', 'button-3');
 
     await sendKeys({ press: 'ArrowDown' });
     await waitForLitRender(element);
-    expect(optOne).to.have.attribute('active');
+    expect(optOne).to.have.attribute('data-active');
     expect(buttonOne).not.to.have.attribute('data-focus-visible');
-    expect(optTwo).not.to.have.attribute('active');
+    expect(optTwo).not.to.have.attribute('data-active');
     expect(buttonTwo).not.to.have.attribute('data-focus-visible');
     expect(buttonThree).not.to.have.attribute('data-focus-visible');
     expect(input).to.have.attribute('aria-activedescendant', 'option-1');
@@ -253,9 +253,9 @@ describe(`sbb-autocomplete-grid`, () => {
     await sendKeys({ press: 'ArrowDown' });
     await sendKeys({ press: 'ArrowDown' });
     await waitForLitRender(element);
-    expect(optOne).not.to.have.attribute('active');
+    expect(optOne).not.to.have.attribute('data-active');
     expect(optOne).not.to.have.attribute('selected');
-    expect(optTwo).to.have.attribute('active');
+    expect(optTwo).to.have.attribute('data-active');
     expect(optTwo).not.to.have.attribute('selected');
     expect(input).to.have.attribute('aria-activedescendant', 'option-2');
 
@@ -263,7 +263,7 @@ describe(`sbb-autocomplete-grid`, () => {
     await waitForCondition(() => didCloseEventSpy.events.length === 1);
     expect(didCloseEventSpy.count).to.be.equal(1);
 
-    expect(optTwo).not.to.have.attribute('active');
+    expect(optTwo).not.to.have.attribute('data-active');
     expect(optTwo).to.have.attribute('selected');
     expect(optionSelectedEventSpy.count).to.be.equal(1);
     expect(input).to.have.attribute('aria-expanded', 'false');
@@ -283,10 +283,10 @@ describe(`sbb-autocomplete-grid`, () => {
 
     await sendKeys({ press: 'ArrowDown' });
     await waitForLitRender(element);
-    expect(optOne).to.have.attribute('active');
+    expect(optOne).to.have.attribute('data-active');
     expect(buttonOne).not.to.have.attribute('data-focus-visible');
     await sendKeys({ press: 'ArrowRight' });
-    expect(optOne).not.to.have.attribute('active');
+    expect(optOne).not.to.have.attribute('data-active');
     expect(buttonOne).to.have.attribute('data-focus-visible');
     expect(input).to.have.attribute('aria-activedescendant', 'button-1');
     await sendKeys({ press: 'Enter' });
@@ -296,7 +296,7 @@ describe(`sbb-autocomplete-grid`, () => {
     await sendKeys({ press: 'ArrowDown' });
     await sendKeys({ press: 'ArrowRight' });
     await waitForLitRender(element);
-    expect(optOne).not.to.have.attribute('active');
+    expect(optOne).not.to.have.attribute('data-active');
     expect(buttonOne).not.to.have.attribute('data-focus-visible');
     expect(buttonTwo).to.have.attribute('data-focus-visible');
     expect(input).to.have.attribute('aria-activedescendant', 'button-2');
diff --git a/src/elements/autocomplete/autocomplete.spec.ts b/src/elements/autocomplete/autocomplete.spec.ts
index 1a8e1dcfc17..f1ba6d79dfb 100644
--- a/src/elements/autocomplete/autocomplete.spec.ts
+++ b/src/elements/autocomplete/autocomplete.spec.ts
@@ -150,9 +150,9 @@ describe(`sbb-autocomplete`, () => {
     await sendKeys({ press: 'ArrowDown' });
     await sendKeys({ press: 'ArrowDown' });
     await waitForLitRender(element);
-    expect(optOne).not.to.have.attribute('active');
+    expect(optOne).not.to.have.attribute('data-active');
     expect(optOne).not.to.have.attribute('selected');
-    expect(optTwo).to.have.attribute('active');
+    expect(optTwo).to.have.attribute('data-active');
     expect(optTwo).not.to.have.attribute('selected');
     expect(input).to.have.attribute('aria-activedescendant', 'option-2');
 
@@ -160,7 +160,7 @@ describe(`sbb-autocomplete`, () => {
     await waitForCondition(() => didCloseEventSpy.events.length === 1);
     expect(didCloseEventSpy.count).to.be.equal(1);
 
-    expect(optTwo).not.to.have.attribute('active');
+    expect(optTwo).not.to.have.attribute('data-active');
     expect(optTwo).to.have.attribute('selected');
     expect(optionSelectedEventSpy.count).to.be.equal(1);
     expect(input).to.have.attribute('aria-expanded', 'false');
diff --git a/src/elements/option/option/__snapshots__/option.snapshot.spec.snap.js b/src/elements/option/option/__snapshots__/option.snapshot.spec.snap.js
index 7b755408065..6b4b95400b9 100644
--- a/src/elements/option/option/__snapshots__/option.snapshot.spec.snap.js
+++ b/src/elements/option/option/__snapshots__/option.snapshot.spec.snap.js
@@ -1,9 +1,8 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-option autocomplete renders selected and active DOM"] = 
+snapshots["sbb-option autocomplete renders selected DOM"] = 
 `<sbb-option
-  active=""
   aria-selected="true"
   data-slot-names="unnamed"
   data-variant="autocomplete"
@@ -15,9 +14,9 @@ snapshots["sbb-option autocomplete renders selected and active DOM"] =
   Option 1
 </sbb-option>
 `;
-/* end snapshot sbb-option autocomplete renders selected and active DOM */
+/* end snapshot sbb-option autocomplete renders selected DOM */
 
-snapshots["sbb-option autocomplete renders selected and active Shadow DOM"] = 
+snapshots["sbb-option autocomplete renders selected Shadow DOM"] = 
 `<div class="sbb-option__container">
   <div class="sbb-option">
     <span class="sbb-option__icon">
@@ -32,7 +31,7 @@ snapshots["sbb-option autocomplete renders selected and active Shadow DOM"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-option autocomplete renders selected and active Shadow DOM */
+/* end snapshot sbb-option autocomplete renders selected Shadow DOM */
 
 snapshots["sbb-option autocomplete renders disabled DOM"] = 
 `<sbb-option
@@ -67,7 +66,7 @@ snapshots["sbb-option autocomplete renders disabled Shadow DOM"] =
 `;
 /* end snapshot sbb-option autocomplete renders disabled Shadow DOM */
 
-snapshots["sbb-option selected active Chrome"] = 
+snapshots["sbb-option selected Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -75,27 +74,27 @@ snapshots["sbb-option selected active Chrome"] =
 }
 </p>
 `;
-/* end snapshot sbb-option selected active Chrome */
+/* end snapshot sbb-option selected Chrome */
 
-snapshots["sbb-option disabled Chrome"] = 
+snapshots["sbb-option selected Firefox"] = 
 `<p>
   {
-  "role": "WebArea",
+  "role": "document",
   "name": ""
 }
 </p>
 `;
-/* end snapshot sbb-option disabled Chrome */
+/* end snapshot sbb-option selected Firefox */
 
-snapshots["sbb-option selected active Firefox"] = 
+snapshots["sbb-option disabled Chrome"] = 
 `<p>
   {
-  "role": "document",
+  "role": "WebArea",
   "name": ""
 }
 </p>
 `;
-/* end snapshot sbb-option selected active Firefox */
+/* end snapshot sbb-option disabled Chrome */
 
 snapshots["sbb-option disabled Firefox"] = 
 `<p>
diff --git a/src/elements/option/option/option-base-element.ts b/src/elements/option/option/option-base-element.ts
index 52cd5e4f42a..d5b21f041c9 100644
--- a/src/elements/option/option/option-base-element.ts
+++ b/src/elements/option/option/option-base-element.ts
@@ -44,8 +44,18 @@ export abstract class SbbOptionBaseElement extends SbbDisabledMixin(
     return this.getAttribute('value') ?? '';
   }
 
-  /** Whether the option is currently active. */
-  @property({ reflect: true, type: Boolean }) public active?: boolean;
+  /**
+   * Whether the option is currently active.
+   * TODO: Remove getter with next major version (keep setter or change to method).
+   *
+   * @internal
+   */
+  public set active(value: boolean) {
+    this.toggleAttribute('data-active', value);
+  }
+  public get active(): string {
+    return this.getAttribute('value') ?? '';
+  }
 
   /** Whether the option is selected. */
   @property({ type: Boolean })
diff --git a/src/elements/option/option/option.scss b/src/elements/option/option/option.scss
index 9e1dbb3c1f5..5bf9e6899f3 100644
--- a/src/elements/option/option/option.scss
+++ b/src/elements/option/option/option.scss
@@ -31,7 +31,7 @@
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
 }
 
-:host([active]) {
+:host([data-active]) {
   --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
 }
 
@@ -97,7 +97,7 @@
   -webkit-tap-highlight-color: transparent;
   -webkit-text-fill-color: var(--sbb-option-color);
 
-  :host([active]) & {
+  :host([data-active]) & {
     @include sbb.focus-outline;
 
     border-radius: var(--sbb-option-border-radius);
diff --git a/src/elements/option/option/option.snapshot.spec.ts b/src/elements/option/option/option.snapshot.spec.ts
index 571f51f56ee..1401b94303f 100644
--- a/src/elements/option/option/option.snapshot.spec.ts
+++ b/src/elements/option/option/option.snapshot.spec.ts
@@ -12,12 +12,12 @@ describe(`sbb-option`, () => {
   describe('autocomplete', () => {
     let element: SbbOptionElement;
 
-    describe('renders selected and active', async () => {
+    describe('renders selected', async () => {
       beforeEach(async () => {
         element = (
           await fixture(html`
             <sbb-autocomplete origin="anchor">
-              <sbb-option value="1" selected active>Option 1</sbb-option>
+              <sbb-option value="1" selected>Option 1</sbb-option>
             </sbb-autocomplete>
             <div id="anchor"></div>
           `)
@@ -55,10 +55,7 @@ describe(`sbb-option`, () => {
     });
   });
 
-  testA11yTreeSnapshot(
-    html`<sbb-option value="1" selected active></sbb-option>`,
-    'selected active',
-  );
+  testA11yTreeSnapshot(html`<sbb-option value="1" selected></sbb-option>`, 'selected');
 
   testA11yTreeSnapshot(html`<sbb-option value="1" disabled></sbb-option>`, 'disabled');
 });
diff --git a/src/elements/option/option/readme.md b/src/elements/option/option/readme.md
index a13b1db43cb..a3537b0060b 100644
--- a/src/elements/option/option/readme.md
+++ b/src/elements/option/option/readme.md
@@ -58,13 +58,12 @@ If the label slot contains only a **text node**, it is possible to search for te
 
 ## Properties
 
-| Name       | Attribute   | Privacy | Type                   | Default | Description                                                                                                                      |
-| ---------- | ----------- | ------- | ---------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `active`   | `active`    | public  | `boolean \| undefined` |         | Whether the option is currently active.                                                                                          |
-| `disabled` | `disabled`  | public  | `boolean`              | `false` | Whether the component is disabled.                                                                                               |
-| `iconName` | `icon-name` | public  | `string \| undefined`  |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
-| `selected` | `selected`  | public  | `boolean`              |         | Whether the option is selected.                                                                                                  |
-| `value`    | `value`     | public  | `string`               |         | Value of the option.                                                                                                             |
+| Name       | Attribute   | Privacy | Type                  | Default | Description                                                                                                                      |
+| ---------- | ----------- | ------- | --------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `disabled` | `disabled`  | public  | `boolean`             | `false` | Whether the component is disabled.                                                                                               |
+| `iconName` | `icon-name` | public  | `string \| undefined` |         | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
+| `selected` | `selected`  | public  | `boolean`             |         | Whether the option is selected.                                                                                                  |
+| `value`    | `value`     | public  | `string`              |         | Value of the option.                                                                                                             |
 
 ## Events
 
diff --git a/src/elements/select/select.spec.ts b/src/elements/select/select.spec.ts
index 4408c4b54b3..6b45d56260a 100644
--- a/src/elements/select/select.spec.ts
+++ b/src/elements/select/select.spec.ts
@@ -169,10 +169,10 @@ describe(`sbb-select`, () => {
     await waitForLitRender(element);
 
     firstOption = element.querySelector<SbbOptionElement>('#option-1')!;
-    expect(firstOption).not.to.have.attribute('active');
+    expect(firstOption).not.to.have.attribute('data-active');
     expect(firstOption).to.have.attribute('selected');
     secondOption = element.querySelector<SbbOptionElement>('#option-2')!;
-    expect(secondOption).not.to.have.attribute('active');
+    expect(secondOption).not.to.have.attribute('data-active');
     expect(secondOption).not.to.have.attribute('selected');
 
     const selectionChange = new EventSpy(SbbOptionElement.events.selectionChange);
@@ -210,9 +210,9 @@ describe(`sbb-select`, () => {
     await waitForCondition(() => didOpen.events.length === 1);
     expect(didOpen.count).to.be.equal(1);
     await waitForLitRender(element);
-    expect(firstOption).not.to.have.attribute('active');
+    expect(firstOption).not.to.have.attribute('data-active');
     expect(firstOption).not.to.have.attribute('selected');
-    expect(secondOption).not.to.have.attribute('active');
+    expect(secondOption).not.to.have.attribute('data-active');
     expect(secondOption).not.to.have.attribute('selected');
 
     const selectionChange = new EventSpy(SbbOptionElement.events.selectionChange);
@@ -288,12 +288,12 @@ describe(`sbb-select`, () => {
     await sendKeys({ press: ' ' });
     await waitForCondition(() => didOpen.events.length === 1);
     expect(didOpen.count).to.be.equal(1);
-    expect(firstOption).not.to.have.attribute('active');
+    expect(firstOption).not.to.have.attribute('data-active');
     expect(firstOption).not.to.have.attribute('selected');
 
     focusableElement.focus();
     await sendKeys({ press: 'ArrowDown' });
-    expect(firstOption).to.have.attribute('active');
+    expect(firstOption).to.have.attribute('data-active');
     expect(firstOption).to.have.attribute('selected');
     expect(element.value).to.be.equal('1');
     expect(displayValue).to.have.trimmed.text('First');
@@ -304,7 +304,7 @@ describe(`sbb-select`, () => {
     await waitForLitRender(element);
     expect(didOpen.count).to.be.equal(1);
     expect(displayValue).to.have.trimmed.text('Third');
-    expect(thirdOption).to.have.attribute('active');
+    expect(thirdOption).to.have.attribute('data-active');
     expect(thirdOption).to.have.attribute('selected');
     expect(element.value).to.be.equal('3');
 
@@ -315,7 +315,7 @@ describe(`sbb-select`, () => {
     await waitForLitRender(element);
     expect(didOpen.count).to.be.equal(1);
     expect(displayValue).to.have.trimmed.text('Second');
-    expect(secondOption).to.have.attribute('active');
+    expect(secondOption).to.have.attribute('data-active');
     expect(secondOption).to.have.attribute('selected');
     expect(element.value).to.be.equal('2');
   });
@@ -331,13 +331,13 @@ describe(`sbb-select`, () => {
     await waitForCondition(() => didOpen.events.length === 1);
     expect(didOpen.count).to.be.equal(1);
 
-    expect(secondOption).not.to.have.attribute('active');
+    expect(secondOption).not.to.have.attribute('data-active');
     expect(secondOption).not.to.have.attribute('selected');
     focusableElement.focus();
     await sendKeys({ press: 'ArrowDown' });
     await sendKeys({ press: 'ArrowDown' });
     await sendKeys({ press: 'Enter' });
-    expect(secondOption).to.have.attribute('active');
+    expect(secondOption).to.have.attribute('data-active');
     expect(secondOption).to.have.attribute('selected');
     expect(element.value).to.be.eql(['2']);
     expect(displayValue).to.have.trimmed.text('Second');
@@ -351,7 +351,7 @@ describe(`sbb-select`, () => {
     await waitForLitRender(element);
     await waitForCondition(() => didOpen.events.length === 2);
     expect(didOpen.count).to.be.equal(2);
-    expect(secondOption).not.to.have.attribute('active');
+    expect(secondOption).not.to.have.attribute('data-active');
     expect(secondOption).to.have.attribute('selected');
     expect(comboBoxElement).to.have.attribute('aria-expanded', 'true');
   });