diff --git a/packages/components/src/components/button-link/shadow.tsx b/packages/components/src/components/button-link/shadow.tsx
index 5e5d9a0ac8..821babaec7 100644
--- a/packages/components/src/components/button-link/shadow.tsx
+++ b/packages/components/src/components/button-link/shadow.tsx
@@ -24,7 +24,9 @@ import { KolButtonWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 	private buttonWcRef?: HTMLKolButtonWcElement;
diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
index 1e1196d1f1..a44188659b 100644
--- a/packages/components/src/components/button/shadow.tsx
+++ b/packages/components/src/components/button/shadow.tsx
@@ -24,7 +24,9 @@ import { KolButtonWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolButton implements ButtonProps, FocusableElement {
 	private buttonWcRef?: HTMLKolButtonWcElement;
diff --git a/packages/components/src/components/combobox/shadow.tsx b/packages/components/src/components/combobox/shadow.tsx
index c220b61a3d..910c2e29a3 100644
--- a/packages/components/src/components/combobox/shadow.tsx
+++ b/packages/components/src/components/combobox/shadow.tsx
@@ -35,7 +35,9 @@ import clsx from 'clsx';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolCombobox implements ComboboxAPI {
 	@Element() private readonly host?: HTMLKolComboboxElement;
diff --git a/packages/components/src/components/input-checkbox/shadow.tsx b/packages/components/src/components/input-checkbox/shadow.tsx
index 5c26089315..885177882d 100644
--- a/packages/components/src/components/input-checkbox/shadow.tsx
+++ b/packages/components/src/components/input-checkbox/shadow.tsx
@@ -37,7 +37,9 @@ import type { FocusableElement } from '../../schema/interfaces/FocusableElement'
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputCheckboxElement;
diff --git a/packages/components/src/components/input-color/shadow.tsx b/packages/components/src/components/input-color/shadow.tsx
index 4a47ad28b4..b7502fa4eb 100644
--- a/packages/components/src/components/input-color/shadow.tsx
+++ b/packages/components/src/components/input-color/shadow.tsx
@@ -34,7 +34,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputColor implements InputColorAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputColorElement;
diff --git a/packages/components/src/components/input-date/shadow.tsx b/packages/components/src/components/input-date/shadow.tsx
index adc37e2f8d..0d189dc9ed 100644
--- a/packages/components/src/components/input-date/shadow.tsx
+++ b/packages/components/src/components/input-date/shadow.tsx
@@ -36,7 +36,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputDate implements InputDateAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputDateElement;
diff --git a/packages/components/src/components/input-email/shadow.tsx b/packages/components/src/components/input-email/shadow.tsx
index 641e8df235..1fc2848dbb 100644
--- a/packages/components/src/components/input-email/shadow.tsx
+++ b/packages/components/src/components/input-email/shadow.tsx
@@ -36,7 +36,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputEmailElement;
diff --git a/packages/components/src/components/input-file/shadow.tsx b/packages/components/src/components/input-file/shadow.tsx
index 52711ddd8d..7dbb51cfe1 100644
--- a/packages/components/src/components/input-file/shadow.tsx
+++ b/packages/components/src/components/input-file/shadow.tsx
@@ -32,7 +32,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputFile implements InputFileAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputFileElement;
diff --git a/packages/components/src/components/input-number/shadow.tsx b/packages/components/src/components/input-number/shadow.tsx
index fb913235be..7c2730a273 100644
--- a/packages/components/src/components/input-number/shadow.tsx
+++ b/packages/components/src/components/input-number/shadow.tsx
@@ -36,7 +36,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputNumber implements InputNumberAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputNumberElement;
diff --git a/packages/components/src/components/input-password/shadow.tsx b/packages/components/src/components/input-password/shadow.tsx
index 71137218fc..195f9cc224 100644
--- a/packages/components/src/components/input-password/shadow.tsx
+++ b/packages/components/src/components/input-password/shadow.tsx
@@ -36,7 +36,9 @@ import type { PasswordVariantPropType } from '../../schema/props/variant/passwor
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputPasswordElement;
diff --git a/packages/components/src/components/input-radio/shadow.tsx b/packages/components/src/components/input-radio/shadow.tsx
index 813977b8e6..be8d08ff29 100644
--- a/packages/components/src/components/input-radio/shadow.tsx
+++ b/packages/components/src/components/input-radio/shadow.tsx
@@ -36,7 +36,9 @@ import { KolFormFieldMsgFc } from '../../functional-components';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputRadio implements InputRadioAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputRadioElement;
diff --git a/packages/components/src/components/input-range/shadow.tsx b/packages/components/src/components/input-range/shadow.tsx
index 98f96e2df4..79c7e3f226 100644
--- a/packages/components/src/components/input-range/shadow.tsx
+++ b/packages/components/src/components/input-range/shadow.tsx
@@ -35,7 +35,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputRange implements InputRangeAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputRangeElement;
diff --git a/packages/components/src/components/input-text/shadow.tsx b/packages/components/src/components/input-text/shadow.tsx
index 2f1a47e57f..e0635c0694 100644
--- a/packages/components/src/components/input-text/shadow.tsx
+++ b/packages/components/src/components/input-text/shadow.tsx
@@ -37,7 +37,9 @@ import { KolInputWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolInputText implements InputTextAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolInputTextElement;
diff --git a/packages/components/src/components/link-button/shadow.tsx b/packages/components/src/components/link-button/shadow.tsx
index 070f1f67f2..4880fd85e8 100644
--- a/packages/components/src/components/link-button/shadow.tsx
+++ b/packages/components/src/components/link-button/shadow.tsx
@@ -24,7 +24,9 @@ import { KolLinkWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolLinkButton implements LinkButtonProps, FocusableElement {
 	private linkWcRef?: HTMLKolLinkWcElement;
diff --git a/packages/components/src/components/link/shadow.tsx b/packages/components/src/components/link/shadow.tsx
index eb3863d36a..490e1a98e5 100644
--- a/packages/components/src/components/link/shadow.tsx
+++ b/packages/components/src/components/link/shadow.tsx
@@ -23,7 +23,9 @@ import { KolLinkWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolLink implements LinkProps, FocusableElement {
 	private linkWcRef?: HTMLKolLinkWcElement;
diff --git a/packages/components/src/components/single-select/shadow.tsx b/packages/components/src/components/single-select/shadow.tsx
index ca5d30d9cc..9dfcee77cd 100644
--- a/packages/components/src/components/single-select/shadow.tsx
+++ b/packages/components/src/components/single-select/shadow.tsx
@@ -35,7 +35,9 @@ import clsx from 'clsx';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolSingleSelect implements SingleSelectAPI {
 	@Element() private readonly host?: HTMLKolSingleSelectElement;
diff --git a/packages/components/src/components/split-button/shadow.tsx b/packages/components/src/components/split-button/shadow.tsx
index 9c49d9943a..fece3357ed 100644
--- a/packages/components/src/components/split-button/shadow.tsx
+++ b/packages/components/src/components/split-button/shadow.tsx
@@ -28,7 +28,9 @@ import { KolButtonWcTag, KolPopoverWcTag } from '../../core/component-names';
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
 	private readonly clickButtonHandler = {
diff --git a/packages/components/src/components/textarea/shadow.tsx b/packages/components/src/components/textarea/shadow.tsx
index b4496ef6fb..bd7984bcd5 100644
--- a/packages/components/src/components/textarea/shadow.tsx
+++ b/packages/components/src/components/textarea/shadow.tsx
@@ -48,7 +48,9 @@ const increaseTextareaHeight = (el: HTMLTextAreaElement): number => {
 	styleUrls: {
 		default: './style.scss',
 	},
-	shadow: true,
+	shadow: {
+		delegatesFocus: true,
+	},
 })
 export class KolTextarea implements TextareaAPI, FocusableElement {
 	@Element() private readonly host?: HTMLKolTextareaElement;
diff --git a/packages/samples/react/src/hooks/useToasterService.ts b/packages/samples/react/src/hooks/useToasterService.ts
index 9456ba4d68..774695ed68 100644
--- a/packages/samples/react/src/hooks/useToasterService.ts
+++ b/packages/samples/react/src/hooks/useToasterService.ts
@@ -3,9 +3,9 @@ import { ToasterService } from '@public-ui/components';
 export function useToasterService() {
 	const toaster = ToasterService.getInstance(document);
 
-	const message = () => {
+	const message = (message?: string) => {
 		void toaster.enqueue({
-			description: 'Hello',
+			description: message || 'Hello',
 			label: `Hello`,
 			type: 'info',
 		});
@@ -15,7 +15,13 @@ export function useToasterService() {
 		message();
 	};
 
+	const buttonWithTextClickEventHandler = (e: Event) => {
+		const text = (e.currentTarget as { textContent?: string }).textContent;
+		message(text);
+	};
+
 	return {
 		dummyClickEventHandler,
+		buttonWithTextClickEventHandler,
 	};
 }
diff --git a/packages/samples/react/src/scenarios/change-tabindex.tsx b/packages/samples/react/src/scenarios/change-tabindex.tsx
new file mode 100644
index 0000000000..cd8cbd9d8e
--- /dev/null
+++ b/packages/samples/react/src/scenarios/change-tabindex.tsx
@@ -0,0 +1,256 @@
+/* eslint-disable jsx-a11y/tabindex-no-positive */
+
+import { SampleDescription } from '../components/SampleDescription';
+import {
+	KolButton,
+	KolButtonLink,
+	KolCard,
+	KolCombobox,
+	KolInputCheckbox,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputColor,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRadio,
+	KolInputRange,
+	KolInputText,
+	KolLinkButton,
+	KolLink,
+	KolSingleSelect,
+	KolSplitButton,
+	KolTextarea,
+} from '@public-ui/react';
+import React from 'react';
+import type { FC } from 'react';
+import { ERROR_MSG, HINT_MSG } from '../shares/constants';
+import { COUNTRY_OPTIONS, COUNTRY_SUGGESTIONS } from '../shares/country';
+import type { Option, StencilUnknown } from '@public-ui/components';
+
+export const ChangeTabindex: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This example show how different components works with tabIndex.</p>
+			</SampleDescription>
+
+			<div className="w-full grid gap-4">
+				<KolCard _label="Button" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolButton _label="Button 1, Tabindex 4" _variant="primary" tabIndex={4} />
+						<KolButton _disabled _label="Button 2, Tabindex 3" _variant="primary" tabIndex={3} />
+						<KolButton _label="Button 3, Tabindex 2" _variant="primary" tabIndex={2} />
+						<KolButton _label="Button 4, Tabindex 1" _variant="primary" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="ButtonLink" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolButtonLink _label="ButtonLink 1, Tabindex 4" tabIndex={4} />
+						<KolButtonLink _disabled _label="ButtonLink 2, Tabindex 3" tabIndex={3} />
+						<KolButtonLink _label="ButtonLink 3, Tabindex 2" tabIndex={2} />
+						<KolButtonLink _label="ButtonLink 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="Combobox" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolCombobox _hint={HINT_MSG} _label="Combobox 1, Tabindex 4" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={4} />
+						<KolCombobox _disabled _hint={HINT_MSG} _label="Combobox 2, Tabindex 3" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={3} />
+						<KolCombobox
+							_touched
+							_hint={HINT_MSG}
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							_label="Combobox 3, Tabindex 2"
+							_suggestions={COUNTRY_SUGGESTIONS}
+							_value={'Deutschland'}
+							tabIndex={2}
+						/>
+						<KolCombobox _hint={HINT_MSG} _label="Combobox 4, Tabindex 1" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputCheckbox" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputCheckbox _label="InputCheckbox 4, Tabindex 1" _value={false} tabIndex={4} />
+						<KolInputCheckbox _disabled _label="InputCheckbox 3, Tabindex 2" _value={false} tabIndex={3} />
+						<KolInputCheckbox _touched _label="InputCheckbox 2, Tabindex 3" _msg={{ _type: 'error', _description: ERROR_MSG }} _value={false} tabIndex={2} />
+						<KolInputCheckbox _label="InputCheckbox 1, Tabindex 4" _value={false} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputColor" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputColor _value="#f08080" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
+						<KolInputColor _disabled _value="#f08080" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
+						<KolInputColor _touched _value="#f08080" _label="InputCheckbox 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputColor _value="#f08080" _label="InputCheckbox 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputDate" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputDate _type="datetime-local" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
+						<KolInputDate _disabled _type="datetime-local" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
+						<KolInputDate
+							_touched
+							_type="datetime-local"
+							_label="InputCheckbox 3, Tabindex 2"
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							tabIndex={2}
+						/>
+						<KolInputDate _type="datetime-local" _label="InputCheckbox 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputEmail" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputEmail _label="InputEmail 1, Tabindex 4" tabIndex={4} />
+						<KolInputEmail _disabled _label="InputEmail 2, Tabindex 3" tabIndex={3} />
+						<KolInputEmail _touched _label="InputEmail 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputEmail _label="InputEmail 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputFile" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputFile _label="InputFile 1, Tabindex 4" tabIndex={4} />
+						<KolInputFile _disabled _label="InputFile 2, Tabindex 3" tabIndex={3} />
+						<KolInputFile _touched _label="InputFile 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputFile _label="InputFile 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputNumber" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputNumber _label="InputNumber 1, Tabindex 4" tabIndex={4} />
+						<KolInputNumber _disabled _label="InputNumber 2, Tabindex 3" tabIndex={3} />
+						<KolInputNumber _touched _label="InputNumber 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputNumber _label="InputNumber 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputPassword" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputPassword _label="InputPassword 1, Tabindex 4" tabIndex={4} />
+						<KolInputPassword _disabled _label="InputPassword 2, Tabindex 3" tabIndex={3} />
+						<KolInputPassword _touched _label="InputPassword 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputPassword _label="InputPassword 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputRadio" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputRadio
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 1, Tabindex 4"
+							tabIndex={4}
+						/>
+						<KolInputRadio
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 2, Tabindex 3"
+							_disabled
+							tabIndex={3}
+						/>
+						<KolInputRadio
+							_touched
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 3, Tabindex 2"
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							tabIndex={2}
+						/>{' '}
+						<KolInputRadio
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 4, Tabindex 1"
+							tabIndex={1}
+						/>
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputRange" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputRange _label="InputRange 1, Tabindex 4" _min={0} _max={50} tabIndex={4} />
+						<KolInputRange _disabled _label="InputRange 2, Tabindex 3" _min={0} _max={50} tabIndex={3} />
+						<KolInputRange _touched _label="InputRange 3, Tabindex 2" _min={0} _max={50} _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputRange _label="InputRange 4, Tabindex 1" _min={0} _max={50} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputText" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputText _label="InputText 1, Tabindex 4" tabIndex={4} />
+						<KolInputText _disabled _label="InputText 2, Tabindex 3" tabIndex={3} />
+						<KolInputText _touched _label="InputText 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputText _label="InputText 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="LinkButton" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolLinkButton _href={'#/back-page'} _label="InputText 1, Tabindex 4" _variant="primary" tabIndex={4}></KolLinkButton>
+						<KolLinkButton _disabled _href={'#/back-page'} _label="InputText 2, Tabindex 3" _variant="primary" tabIndex={3}></KolLinkButton>
+						<KolLinkButton _href={'#/back-page'} _label="InputText 3, Tabindex 2" _variant="primary" tabIndex={2}></KolLinkButton>
+						<KolLinkButton _href={'#/back-page'} _label="InputText 4, Tabindex 1" _variant="primary" tabIndex={1}></KolLinkButton>
+					</div>
+				</KolCard>
+
+				<KolCard _label="Link" _level={0}>
+					<KolLink _href="#/back-page" _label="InputText 1, Tabindex 4" tabIndex={4} />
+					<KolLink _disabled _href="#/back-page" _label="InputText 2, Tabindex 3" tabIndex={3} />
+					<KolLink _href="#/back-page" _label="InputText 3, Tabindex 2" tabIndex={2} />
+					<KolLink _href="#/back-page" _label="InputText 4, Tabindex 1" tabIndex={1} />
+				</KolCard>
+
+				<KolCard _label="SingleSelect" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolSingleSelect _label="InputText 1, Tabindex 4" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={4} />
+						<KolSingleSelect _disabled _label="InputText 2, Tabindex 3" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={3} />
+						<KolSingleSelect
+							_touched
+							_label="InputText 3, Tabindex 2"
+							_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							_value={'de'}
+							tabIndex={2}
+						/>
+						<KolSingleSelect _label="InputText 4, Tabindex 1" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="SplitButton" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolSplitButton _label="InputText 1, Tabindex 4" tabIndex={4}>
+							Dropdown-Inhalt
+						</KolSplitButton>
+						<KolSplitButton _label="InputText 2, Tabindex 3" tabIndex={3} _disabled>
+							Dropdown-Inhalt
+						</KolSplitButton>
+						<KolSplitButton _label="InputText 3, Tabindex 2" tabIndex={2}>
+							Dropdown-Inhalt
+						</KolSplitButton>{' '}
+						<KolSplitButton _label="InputText 4, Tabindex 1" tabIndex={1}>
+							Dropdown-Inhalt
+						</KolSplitButton>
+					</div>
+				</KolCard>
+
+				<KolCard _label="Textarea" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolTextarea _label="Textarea 1, Tabindex 4" _rows={3} _placeholder="Placeholder" tabIndex={4} />
+						<KolTextarea _disabled _label="Textarea 2, Tabindex 3" _rows={3} _placeholder="Placeholder" tabIndex={3} />
+						<KolTextarea
+							_touched
+							_label="Textarea 3, Tabindex 2"
+							_rows={3}
+							_placeholder="Placeholder"
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							tabIndex={2}
+						/>
+						<KolTextarea _label="Textarea 4, Tabindex 1" _rows={3} _placeholder="Placeholder" tabIndex={1} />
+					</div>
+				</KolCard>
+			</div>
+		</>
+	);
+};
diff --git a/packages/samples/react/src/scenarios/routes.ts b/packages/samples/react/src/scenarios/routes.ts
index c61e1936a9..431e8964d6 100644
--- a/packages/samples/react/src/scenarios/routes.ts
+++ b/packages/samples/react/src/scenarios/routes.ts
@@ -7,6 +7,7 @@ import { StaticForm } from './static-form';
 import { FocusElements } from './focus-elements';
 import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
 import { InputGroupWithError } from './input-group-with-error';
+import { ChangeTabindex } from './change-tabindex';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
@@ -18,5 +19,6 @@ export const SCENARIO_ROUTES: Routes = {
 		'inputs-get-value': InputsGetValue,
 		'static-form': StaticForm,
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
+		'change-tabindex': ChangeTabindex,
 	},
 };