diff --git a/packages/components/docs/Validation.md b/packages/components/docs/Validation.md
index 3527129af39..150846e43d0 100644
--- a/packages/components/docs/Validation.md
+++ b/packages/components/docs/Validation.md
@@ -11,6 +11,8 @@
 
 If you use some framework you can pass the props `invalidMessage` and `validMessage` to the component. If you use plain html you need to add 2 `.db-infotext` with `[data-semantic="successful"]` &`[data-semantic="critical"]` inside your form-element.
 
-## Force valid/invalid
+## Handle validation by your self
 
-You can use `invalid="true/false"` or `data-invalid="true/false"` to overwrite the default behaviour of [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
+You can use `data-custom-validity|customValidity="'invalid' | 'valid' | 'no-validation'"` to disable [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
+
+> **Note:** This may lead to problems and inconsistency, only use it if you know what you do!
diff --git a/packages/components/scripts/post-build/react.js b/packages/components/scripts/post-build/react.js
index b0bbb3e5fe3..47537a0de88 100644
--- a/packages/components/scripts/post-build/react.js
+++ b/packages/components/scripts/post-build/react.js
@@ -48,15 +48,15 @@ module.exports = (tmp) => {
 				},
 				{
 					from: ` } from "react"`,
-					to: `, forwardRef, HTMLProps } from "react"`
+					to: `, forwardRef, HTMLAttributes } from "react"`
 				},
 				{
 					from: `function DB${upperComponentName}(props: DB${upperComponentName}Props) {`,
-					to: `function DB${upperComponentName}Fn(props: Omit<HTMLProps<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props, component: any) {`
+					to: `function DB${upperComponentName}Fn(props: Omit<HTMLAttributes<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props, component: any) {`
 				},
 				{
 					from: `export default DB${upperComponentName};`,
-					to: `const DB${upperComponentName} = forwardRef<${htmlElement}, Omit<HTMLProps<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props>(DB${upperComponentName}Fn);\nexport default DB${upperComponentName};`
+					to: `const DB${upperComponentName} = forwardRef<${htmlElement}, Omit<HTMLAttributes<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props>(DB${upperComponentName}Fn);\nexport default DB${upperComponentName};`
 				},
 				{
 					from: 'if (ref.current)',
diff --git a/packages/components/src/components/accordion-item/docs/Angular.md b/packages/components/src/components/accordion-item/docs/Angular.md
index bc2c654a735..f7f8a664318 100644
--- a/packages/components/src/components/accordion-item/docs/Angular.md
+++ b/packages/components/src/components/accordion-item/docs/Angular.md
@@ -23,7 +23,7 @@ import { DBAccordionItem } from '@db-ui/ngx-components';
 ```html app.component.html
 <!-- app.component.html -->
 <db-accordion-item>
-	<ng-container *title>Title</ng-container>
+	<ng-container *headline>Title</ng-container>
 	Content
 </db-accordion-item>
 ```
@@ -32,5 +32,5 @@ import { DBAccordionItem } from '@db-ui/ngx-components';
 
 ```html app.component.html
 <!-- app.component.html -->
-<db-accordion-item title="Title" content="Content"></db-accordion-item>
+<db-accordion-item headlinePlain="Title" content="Content"></db-accordion-item>
 ```
diff --git a/packages/components/src/components/accordion-item/docs/Migration.md b/packages/components/src/components/accordion-item/docs/Migration.md
index 409e5bfa671..3faf9f15818 100644
--- a/packages/components/src/components/accordion-item/docs/Migration.md
+++ b/packages/components/src/components/accordion-item/docs/Migration.md
@@ -15,7 +15,7 @@
 
 | Before     | Status | After      | Description                                                 |
 | ---------- | :----: | ---------- | ----------------------------------------------------------- |
-| `summary`  |   🔁   | `title`    | The title/summary of the details element.                   |
+| `summary`  |   🔁   | `headline` | The title/summary of the details element.                   |
 | `emphasis` |   ❌   | ❌         | There is no emphasis anymore.                               |
 | `size`     |   ❌   | ❌         | Controlled by the density.                                  |
 |            |   🆕   | `disabled` | Disable the component.                                      |
diff --git a/packages/components/src/components/accordion-item/docs/React.md b/packages/components/src/components/accordion-item/docs/React.md
index a9881822b9a..fb8a0eef923 100644
--- a/packages/components/src/components/accordion-item/docs/React.md
+++ b/packages/components/src/components/accordion-item/docs/React.md
@@ -10,7 +10,7 @@ For general installation and configuration look at the [react-components](https:
 // App.tsx
 import { DBAccordionItem } from "@db-ui/react-components";
 
-const App = () => <DBAccordionItem slotTitle="Title">Content</DBAccordionItem>;
+const App = () => <DBAccordionItem headline="Title">Content</DBAccordionItem>;
 export default App;
 ```
 
@@ -20,6 +20,6 @@ export default App;
 // App.tsx
 import { DBAccordionItem } from "@db-ui/react-components";
 
-const App = () => <DBAccordionItem title="Title" content="Content" />;
+const App = () => <DBAccordionItem headline="Title" content="Content" />;
 export default App;
 ```
diff --git a/packages/components/src/components/accordion-item/docs/Vue.md b/packages/components/src/components/accordion-item/docs/Vue.md
index 43153a32457..237f03468e2 100644
--- a/packages/components/src/components/accordion-item/docs/Vue.md
+++ b/packages/components/src/components/accordion-item/docs/Vue.md
@@ -14,7 +14,7 @@ import { DBAccordionItem } from "@db-ui/v-components";
 
 <template>
 	<DBAccordionItem>
-		<template v-slot:title>Title</template>
+		<template v-slot:headline>Title</template>
 		Content
 	</DBAccordionItem>
 </template>
@@ -29,6 +29,6 @@ import { DBAccordionItem } from "@db-ui/v-components";
 </script>
 
 <template>
-	<DBAccordionItem title="Title" content="Content"></DBAccordionItem>
+	<DBAccordionItem headline="Title" content="Content"></DBAccordionItem>
 </template>
 ```
diff --git a/packages/components/src/components/accordion/docs/Angular.md b/packages/components/src/components/accordion/docs/Angular.md
index c06e029be22..537c227301f 100644
--- a/packages/components/src/components/accordion/docs/Angular.md
+++ b/packages/components/src/components/accordion/docs/Angular.md
@@ -21,8 +21,17 @@ import { DBAccordion, DBAccordionItem } from '@db-ui/ngx-components';
 ```html app.component.html
 <!-- app.component.html -->
 <db-accordion>
-	<db-accordion-item title="Item 1" content="Content 1"></db-accordion-item>
-	<db-accordion-item title="Item 2" content="Content 2"></db-accordion-item>
-	<db-accordion-item title="Item 3" content="Content 3"></db-accordion-item>
+	<db-accordion-item
+		headlinePlain="Item 1"
+		content="Content 1"
+	></db-accordion-item>
+	<db-accordion-item
+		headlinePlain="Item 2"
+		content="Content 2"
+	></db-accordion-item>
+	<db-accordion-item
+		headlinePlain="Item 3"
+		content="Content 3"
+	></db-accordion-item>
 </db-accordion>
 ```
diff --git a/packages/components/src/components/accordion/docs/React.md b/packages/components/src/components/accordion/docs/React.md
index 081317a348c..eb5b9549a12 100644
--- a/packages/components/src/components/accordion/docs/React.md
+++ b/packages/components/src/components/accordion/docs/React.md
@@ -10,9 +10,9 @@ import { DBAccordion, DBAccordionItem } from "@db-ui/react-components";
 
 const App = () => (
 	<DBAccordion>
-		<DBAccordionItem title="Item 1" content="Content 1" />
-		<DBAccordionItem title="Item 2" content="Content 2" />
-		<DBAccordionItem title="Item 3" content="Content 3" />
+		<DBAccordionItem headlinePlain="Item 1" content="Content 1" />
+		<DBAccordionItem headlinePlain="Item 2" content="Content 2" />
+		<DBAccordionItem headlinePlain="Item 3" content="Content 3" />
 	</DBAccordion>
 );
 export default App;
diff --git a/packages/components/src/components/accordion/docs/Vue.md b/packages/components/src/components/accordion/docs/Vue.md
index 64149be8e82..242f1193ea9 100644
--- a/packages/components/src/components/accordion/docs/Vue.md
+++ b/packages/components/src/components/accordion/docs/Vue.md
@@ -12,9 +12,9 @@ import { DBAccordion, DBAccordionItem } from "@db-ui/v-components";
 
 <template>
 	<DBAccordion>
-		<DBAccordionItem title="Item 1" content="Content 1" />
-		<DBAccordionItem title="Item 2" content="Content 2" />
-		<DBAccordionItem title="Item 3" content="Content 3" />
+		<DBAccordionItem headlinePlain="Item 1" content="Content 1" />
+		<DBAccordionItem headlinePlain="Item 2" content="Content 2" />
+		<DBAccordionItem headlinePlain="Item 3" content="Content 3" />
 	</DBAccordion>
 </template>
 ```
diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
index 44574d6b567..88731fea359 100644
--- a/packages/components/src/components/button/button.lite.tsx
+++ b/packages/components/src/components/button/button.lite.tsx
@@ -26,7 +26,6 @@ export default function DBButton(props: DBButtonProps) {
 			id={props.id}
 			class={cls('db-button', props.className)}
 			type={props.type}
-			title={props.title}
 			disabled={props.disabled}
 			aria-label={props.label}
 			data-icon={props.icon}
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 25f659304a6..4042d0223a0 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -121,6 +121,8 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			data-variant={props.variant}>
 			<label htmlFor={state._id}>
 				<input
+					aria-invalid={props.customValidity === 'invalid'}
+					data-custom-validity={props.customValidity}
 					ref={ref}
 					type="checkbox"
 					id={state._id}
@@ -128,7 +130,6 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 					checked={props.checked}
 					disabled={props.disabled}
 					value={props.value}
-					aria-invalid={props.invalid}
 					required={props.required}
 					onChange={(event: ChangeEvent<HTMLInputElement>) =>
 						state.handleChange(event)
diff --git a/packages/components/src/components/header/header.lite.tsx b/packages/components/src/components/header/header.lite.tsx
index 16a643531e6..5db1df0115b 100644
--- a/packages/components/src/components/header/header.lite.tsx
+++ b/packages/components/src/components/header/header.lite.tsx
@@ -1,17 +1,17 @@
 import {
 	onMount,
 	onUpdate,
-	Show,
 	Slot,
 	useMetadata,
 	useRef,
 	useStore
 } from '@builder.io/mitosis';
-import { DBHeaderState, DBHeaderProps } from './model';
+import { DBHeaderProps, DBHeaderState } from './model';
 import { addAttributeToChildren, cls, uuid } from '../../utils';
 import { DBButton } from '../button';
 import { DBDrawer } from '../drawer';
 import { DEFAULT_ID } from '../../shared/constants';
+import { isEventTargetNavigationItem } from '../../utils/navigation';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -31,6 +31,11 @@ export default function DBHeader(props: DBHeaderProps) {
 			if (props.onToggle) {
 				props.onToggle(!props.drawerOpen);
 			}
+		},
+		handleNavigationItemClick: (event: unknown) => {
+			if (isEventTargetNavigationItem(event)) {
+				state.toggle();
+			}
 		}
 	});
 
@@ -72,7 +77,13 @@ export default function DBHeader(props: DBHeaderProps) {
 				open={props.drawerOpen}
 				onClose={() => state.toggle()}>
 				<div class="db-header-drawer-navigation">
-					<div class="db-header-navigation">{props.children}</div>
+					<div
+						class="db-header-navigation"
+						onClick={(event) =>
+							state.handleNavigationItemClick(event)
+						}>
+						{props.children}
+					</div>
 					<div class="db-header-meta-navigation">
 						<Slot name="metaNavigation" />
 					</div>
diff --git a/packages/components/src/components/header/model.ts b/packages/components/src/components/header/model.ts
index f431ea34963..4757f434247 100644
--- a/packages/components/src/components/header/model.ts
+++ b/packages/components/src/components/header/model.ts
@@ -2,6 +2,7 @@ import {
 	GlobalProps,
 	GlobalState,
 	InitializedState,
+	NavigationBehaviourState,
 	ToggleEventProps,
 	ToggleEventState
 } from '../../shared/model';
@@ -38,4 +39,5 @@ export interface DBHeaderDefaultState {
 export type DBHeaderState = DBHeaderDefaultState &
 	GlobalState &
 	ToggleEventState<HTMLElement> &
-	InitializedState;
+	InitializedState &
+	NavigationBehaviourState;
diff --git a/packages/components/src/components/icon/icon.lite.tsx b/packages/components/src/components/icon/icon.lite.tsx
index a2496ad3b24..dd1dd67b8d6 100644
--- a/packages/components/src/components/icon/icon.lite.tsx
+++ b/packages/components/src/components/icon/icon.lite.tsx
@@ -21,8 +21,7 @@ export default function DBIcon(props: DBIconProps) {
 			data-icon={props.icon}
 			data-icon-weight={props.weight}
 			data-icon-variant={props.variant}
-			aria-hidden="true"
-			title={props.title}>
+			aria-hidden="true">
 			{props.children}
 		</span>
 	);
diff --git a/packages/components/src/components/infotext/infotext.lite.tsx b/packages/components/src/components/infotext/infotext.lite.tsx
index 42afa377723..b88ba0c59c6 100644
--- a/packages/components/src/components/infotext/infotext.lite.tsx
+++ b/packages/components/src/components/infotext/infotext.lite.tsx
@@ -18,7 +18,6 @@ export default function DBInfotext(props: DBInfotextProps) {
 			ref={ref}
 			id={props.id}
 			class={cls('db-infotext', props.className)}
-			title={props.title}
 			data-icon={props.icon}
 			data-semantic={props.semantic}
 			data-size={props.size}>
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index d317a051f4c..cbe60fdcf36 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -111,6 +111,8 @@ export default function DBInput(props: DBInputProps) {
 				{props.label ?? state.defaultValues.label}
 			</label>
 			<input
+				aria-invalid={props.customValidity === 'invalid'}
+				data-custom-validity={props.customValidity}
 				ref={ref}
 				id={state._id}
 				name={props.name}
@@ -122,7 +124,6 @@ export default function DBInput(props: DBInputProps) {
 				required={props.required}
 				step={props.step}
 				value={props.value}
-				aria-invalid={props.invalid}
 				maxLength={props.maxLength}
 				minLength={props.minLength}
 				max={props.max}
diff --git a/packages/components/src/components/link/link.lite.tsx b/packages/components/src/components/link/link.lite.tsx
index acce97b517e..5942202c2da 100644
--- a/packages/components/src/components/link/link.lite.tsx
+++ b/packages/components/src/components/link/link.lite.tsx
@@ -28,7 +28,6 @@ export default function DBLink(props: DBLinkProps) {
 			id={props.id}
 			class={cls('db-link', props.className)}
 			href={props.href}
-			title={props.title}
 			target={props.target}
 			rel={props.rel}
 			role={props.role}
diff --git a/packages/components/src/components/navigation/navigation.scss b/packages/components/src/components/navigation/navigation.scss
index 77cc67f66d4..d61c1c7b50a 100644
--- a/packages/components/src/components/navigation/navigation.scss
+++ b/packages/components/src/components/navigation/navigation.scss
@@ -86,4 +86,12 @@
 			}
 		}
 	}
+
+	&[data-force-close="true"] {
+		& > menu menu {
+			@include screen-sizes.screen("md") {
+				display: none;
+			}
+		}
+	}
 }
diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
index 3b5ca47e75d..bfb260c4daf 100644
--- a/packages/components/src/components/radio/radio.lite.tsx
+++ b/packages/components/src/components/radio/radio.lite.tsx
@@ -85,6 +85,8 @@ export default function DBRadio(props: DBRadioProps) {
 			class={cls('db-radio', props.className)}
 			htmlFor={state._id}>
 			<input
+				aria-invalid={props.customValidity === 'invalid'}
+				data-custom-validity={props.customValidity}
 				ref={ref}
 				type="radio"
 				id={state._id}
@@ -92,7 +94,6 @@ export default function DBRadio(props: DBRadioProps) {
 				checked={props.checked}
 				disabled={props.disabled}
 				aria-describedby={props.describedbyid}
-				aria-invalid={props.invalid}
 				value={props.value}
 				required={props.required}
 				onChange={(event: ChangeEvent<HTMLInputElement>) =>
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index 4cf1d6c8fb9..fbf909d9c1d 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -108,8 +108,9 @@ export default function DBSelect(props: DBSelectProps) {
 			data-icon={props.icon}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<select
+				aria-invalid={props.customValidity === 'invalid'}
+				data-custom-validity={props.customValidity}
 				ref={ref}
-				aria-invalid={props.invalid}
 				required={props.required}
 				disabled={props.disabled}
 				id={state._id}
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index e88f7b36076..336171c89bc 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -15,7 +15,6 @@ import {
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
 	DEFAULT_LABEL,
 	DEFAULT_MESSAGE_ID_SUFFIX,
-	DEFAULT_PLACEHOLDER_ID_SUFFIX,
 	DEFAULT_VALID_MESSAGE,
 	DEFAULT_VALID_MESSAGE_ID_SUFFIX
 } from '../../shared/constants';
@@ -104,13 +103,14 @@ export default function DBTextarea(props: DBTextareaProps) {
 			</label>
 
 			<textarea
+				aria-invalid={props.customValidity === 'invalid'}
+				data-custom-validity={props.customValidity}
 				ref={ref}
 				id={state._id}
 				data-resize={props.resize}
 				disabled={props.disabled}
 				required={props.required}
 				readOnly={props.readOnly}
-				aria-invalid={props.invalid}
 				form={props.form}
 				maxLength={props.maxLength}
 				minLength={props.minLength}
diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
index 8b393aea581..3226d054836 100644
--- a/packages/components/src/shared/model.ts
+++ b/packages/components/src/shared/model.ts
@@ -28,16 +28,6 @@ export type GlobalProps = {
 	 * React specific for render process.
 	 */
 	key?: string;
-
-	/**
-	 * The default tabindex (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex?retiredLocale=de).
-	 */
-	tabIndex?: number;
-
-	/**
-	 * The [title attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) specifies the tooltip of the component.
-	 */
-	title?: string;
 };
 
 export type GlobalState = {
@@ -99,6 +89,10 @@ export type PlacementProps = {
 		| 'bottom-end';
 };
 
+export type NavigationBehaviourState = {
+	handleNavigationItemClick: (event: unknown) => void;
+};
+
 export type GapProps = {
 	/**
 	 * If the absolute element should have a gap between the parent element.
@@ -158,6 +152,10 @@ export type EmphasisProps = {
 };
 
 export type FormProps = {
+	/**
+	 * Marks an input element as invalid (red) | valid(green) | no-validation(grey). Overwrites the :user-valid selector.
+	 */
+	customValidity?: 'invalid' | 'valid' | 'no-validation';
 	/**
 	 * The disabled attribute can be set to keep a user from clicking on the form element.
 	 */
@@ -166,10 +164,7 @@ export type FormProps = {
 	 * 	Associates the control with a form element
 	 */
 	form?: string;
-	/**
-	 * Marks an input element as invalid. Overwrites the :user-valid selector.
-	 */
-	invalid?: boolean;
+
 	/**
 	 * The label attribute specifies the caption of the form element.
 	 */
diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss
index 1a14d026b60..2a5a56aa607 100644
--- a/packages/components/src/styles/_form-components.scss
+++ b/packages/components/src/styles/_form-components.scss
@@ -199,13 +199,12 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden"
 		$validations: ":required, [minlength], [maxlength]";
 	}
 
-	$has-selectors: "&:has(#{$selector}:not([aria-invalid]):is(#{$validations}):user-#{$key}),";
+	$has-selectors: "&:has(#{$selector}:not([data-custom-validity]):is(#{$validations}):user-#{$key}),";
 
 	@return string.unquote(string.slice($has-selectors, 1, -2));
 }
 
 @mixin get-validity($selector, $key: "valid") {
-	$boolean: "true";
 	@if ($key == "valid") {
 		$boolean: "false";
 	}
@@ -218,7 +217,11 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden"
 	@if ($selector == check or $selector == radio) {
 		$selector: input;
 
-		&:has(#{$selector}:not([aria-invalid]):required:#{$user}#{$key}) {
+		&:has(
+				#{$selector}:not(
+						[data-custom-validity]
+					):required:#{$user}#{$key}
+			) {
 			@content;
 		}
 	} @else {
@@ -227,8 +230,8 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden"
 		}
 	}
 
-	// If aria-invalid is set we overwrite the selectors above
-	&:has(#{$selector}[aria-invalid="#{$boolean}"]) {
+	// If data-custom-validity is set we overwrite the selectors above
+	&:has(#{$selector}[data-custom-validity="#{$key}"]) {
 		@content;
 	}
 }
diff --git a/packages/components/src/utils/index.ts b/packages/components/src/utils/index.ts
index 97d67f0722c..c397c1f35bd 100644
--- a/packages/components/src/utils/index.ts
+++ b/packages/components/src/utils/index.ts
@@ -1,4 +1,5 @@
 import { SemanticType } from '../shared/model';
+import { AriaRole, CSSProperties } from 'react';
 
 export const uuid = () => {
 	if (typeof window !== 'undefined') {
@@ -49,6 +50,43 @@ export const cls = (...args: ClassNameArg[]) => {
 	return result.trim();
 };
 
+const reactHtmlAttributes = [
+	'suppressHydrationWarning',
+	'suppressContentEditableWarning',
+	'translate',
+	'title',
+	'tabIndex',
+	'style',
+	'spellCheck',
+	'nonce',
+	'lang',
+	'hidden',
+	'draggable',
+	'dir',
+	'contextMenu',
+	'contentEditable',
+	'autoFocus',
+	'accessKey',
+	'is',
+	'inputMode',
+	'unselectable',
+	'security',
+	'results',
+	'vocab',
+	'typeof',
+	'rev',
+	'resource',
+	'rel',
+	'property',
+	'inlist',
+	'datatype',
+	'content',
+	'about',
+	'role',
+	'radioGroup',
+	'color'
+];
+
 export const filterPassingProps = (
 	props: any,
 	propsPassingFilter: string[]
@@ -60,7 +98,9 @@ export const filterPassingProps = (
 					key.startsWith('aria-') ||
 					key.startsWith('default') ||
 					key.startsWith('auto') ||
-					key.startsWith('on')) &&
+					key.startsWith('item') ||
+					key.startsWith('on') ||
+					reactHtmlAttributes.includes(key)) &&
 				!propsPassingFilter.includes(key)
 		)
 		.reduce((obj: any, key: string) => {
diff --git a/packages/components/src/utils/navigation.ts b/packages/components/src/utils/navigation.ts
new file mode 100644
index 00000000000..d10bdb6679c
--- /dev/null
+++ b/packages/components/src/utils/navigation.ts
@@ -0,0 +1,11 @@
+export const isEventTargetNavigationItem = (event: unknown): boolean => {
+	const { target } = event as { target: HTMLElement };
+	return Boolean(
+		!target?.classList?.contains('db-navigation-item-expand-button') &&
+			target?.parentElement?.classList.contains('db-navigation-item')
+	);
+};
+
+export default {
+	isEventTargetNavigationItem
+};
diff --git a/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.html b/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.html
index 9e22719b11b..326ce90f444 100644
--- a/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.html
+++ b/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.html
@@ -11,7 +11,7 @@
 		let-variantIndex="variantIndex"
 	>
 		<db-accordion-item
-			[headlinePlain]="exampleProps.title"
+			[headlinePlain]="exampleProps.headlinePlain"
 			[disabled]="exampleProps.disabled"
 			[defaultOpen]="exampleProps.open"
 		>
diff --git a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html
index 33b32668d88..dea5accbc28 100644
--- a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html
+++ b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.html
@@ -17,7 +17,6 @@
 			[value]="exampleProps.value"
 			[required]="exampleProps.required"
 			[indeterminate]="exampleProps.indeterminate"
-			[invalid]="exampleProps.invalid"
 			[variant]="exampleProps.variant"
 			[size]="exampleProps.size"
 			>{{ exampleName }}</db-checkbox
diff --git a/showcases/angular-showcase/src/app/components/input/input.component.html b/showcases/angular-showcase/src/app/components/input/input.component.html
index 916d3db9610..ca7bccc3997 100644
--- a/showcases/angular-showcase/src/app/components/input/input.component.html
+++ b/showcases/angular-showcase/src/app/components/input/input.component.html
@@ -21,18 +21,7 @@
 			[disabled]="exampleProps.disabled"
 			[value]="exampleProps.value"
 			[icon]="exampleProps.icon"
-			[invalid]="exampleProps.invalid"
 			[iconAfter]="exampleProps.iconAfter"
-			[invalidMessage]="
-				exampleProps.invalid !== undefined || exampleProps.required
-					? 'Invalid Message'
-					: undefined
-			"
-			[validMessage]="
-				exampleProps.invalid !== undefined || exampleProps.required
-					? 'Valid Message'
-					: undefined
-			"
 		></db-input>
 	</ng-template>
 </app-default-component>
diff --git a/showcases/angular-showcase/src/app/components/radio/radio.component.html b/showcases/angular-showcase/src/app/components/radio/radio.component.html
index df45dbcc3cf..494ee4152a6 100644
--- a/showcases/angular-showcase/src/app/components/radio/radio.component.html
+++ b/showcases/angular-showcase/src/app/components/radio/radio.component.html
@@ -16,7 +16,6 @@
 			[name]="exampleProps.name"
 			[value]="exampleProps.value"
 			[checked]="exampleProps.checked"
-			[invalid]="exampleProps.invalid"
 			[required]="exampleProps.required"
 			[disabled]="exampleProps.disabled"
 			[variant]="exampleProps.variant"
diff --git a/showcases/angular-showcase/src/app/components/select/select.component.html b/showcases/angular-showcase/src/app/components/select/select.component.html
index df0bc7b200e..ed964a972f8 100644
--- a/showcases/angular-showcase/src/app/components/select/select.component.html
+++ b/showcases/angular-showcase/src/app/components/select/select.component.html
@@ -20,16 +20,6 @@
 			[required]="exampleProps.required"
 			[value]="exampleProps.value"
 			[message]="exampleProps.message"
-			[invalidMessage]="
-				exampleProps.invalid !== undefined || exampleProps.required
-					? 'Invalid Message'
-					: undefined
-			"
-			[validMessage]="
-				exampleProps.invalid !== undefined || exampleProps.required
-					? 'Valid Message'
-					: undefined
-			"
 			>{{ exampleName }}</db-select
 		>
 	</ng-template>
diff --git a/showcases/angular-showcase/src/app/components/textarea/textarea.component.html b/showcases/angular-showcase/src/app/components/textarea/textarea.component.html
index 64f8120970f..c6427d941ca 100644
--- a/showcases/angular-showcase/src/app/components/textarea/textarea.component.html
+++ b/showcases/angular-showcase/src/app/components/textarea/textarea.component.html
@@ -21,17 +21,6 @@
 			[rows]="exampleProps.rows"
 			[placeholder]="exampleProps.placeholder || exampleName"
 			[message]="exampleProps.message"
-			[invalid]="exampleProps.invalid"
-			[invalidMessage]="
-				exampleProps.invalid !== undefined || exampleProps.required
-					? 'Invalid Message'
-					: undefined
-			"
-			[validMessage]="
-				exampleProps.invalid !== undefined || exampleProps.required
-					? 'Valid Message'
-					: undefined
-			"
 		></db-textarea>
 	</ng-template>
 </app-default-component>
diff --git a/showcases/patternhub/components/validation-example/index.tsx b/showcases/patternhub/components/validation-example/index.tsx
new file mode 100644
index 00000000000..a14dc4d6193
--- /dev/null
+++ b/showcases/patternhub/components/validation-example/index.tsx
@@ -0,0 +1,53 @@
+import { DBCard, DBInput, DBButton, DBInfotext } from '../src';
+
+const ValidationExample = () => {
+	return (
+		<>
+			<h3>Example</h3>
+
+			<div className="validity-container">
+				<DBCard>
+					<h4>No customValidity</h4>
+					<DBInfotext semantic="informational">
+						<span>
+							default browser behaviour with auto changing colors
+						</span>
+					</DBInfotext>
+					<form>
+						<DBInput
+							label="Required"
+							placeholder="Required"
+							invalidMessage="This is required"
+							validMessage="Success"
+							required
+						/>
+						<DBButton>Send</DBButton>
+					</form>
+				</DBCard>
+
+				<DBCard>
+					<h4>With customValidity (valid)</h4>
+					<DBInfotext semantic="informational">
+						<span>
+							fixed customValidity, no auto changing of colors and
+							bad UX
+						</span>
+					</DBInfotext>
+					<form>
+						<DBInput
+							label="Required"
+							placeholder="Required"
+							invalidMessage="This is required"
+							validMessage="Success"
+							required
+							customValidity="valid"
+						/>
+						<DBButton>Send</DBButton>
+					</form>
+				</DBCard>
+			</div>
+		</>
+	);
+};
+
+export default ValidationExample;
diff --git a/showcases/patternhub/pages/components/router-usage.mdx b/showcases/patternhub/pages/components/router-usage.mdx
index 33979456931..148adcabac2 100644
--- a/showcases/patternhub/pages/components/router-usage.mdx
+++ b/showcases/patternhub/pages/components/router-usage.mdx
@@ -1,5 +1,5 @@
-import DefaultPage from "../../../components/default-page";
-import RouterUsage from "../../../../../packages/components/docs/router-usage.md";
+import DefaultPage from "../../components/default-page";
+import RouterUsage from "../../../../packages/components/docs/router-usage.md";
 
 <RouterUsage />
 
diff --git a/showcases/patternhub/pages/components/validation.mdx b/showcases/patternhub/pages/components/validation.mdx
index 5a7306d7268..588ff17cc40 100644
--- a/showcases/patternhub/pages/components/validation.mdx
+++ b/showcases/patternhub/pages/components/validation.mdx
@@ -1,6 +1,9 @@
 import DefaultPage from "../../components/default-page";
 import Readme from "../../../../packages/components/docs/Validation.md";
+import ValidationExample from "../../components/validation-example";
 
 <Readme />
 
+<ValidationExample />
+
 export default ({ children }) => <DefaultPage>{children}</DefaultPage>;
diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss
index 80fb6aae76f..e39438f3459 100644
--- a/showcases/patternhub/styles/globals.scss
+++ b/showcases/patternhub/styles/globals.scss
@@ -424,3 +424,15 @@ h6 {
 		}
 	}
 }
+
+.validity-container {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: variables.$db-spacing-fixed-sm;
+
+	form {
+		display: flex;
+		flex-direction: column;
+		gap: variables.$db-spacing-fixed-sm;
+	}
+}
diff --git a/showcases/react-showcase/src/components/accordion-item/index.tsx b/showcases/react-showcase/src/components/accordion-item/index.tsx
index 7912fa2d503..229a769e94d 100644
--- a/showcases/react-showcase/src/components/accordion-item/index.tsx
+++ b/showcases/react-showcase/src/components/accordion-item/index.tsx
@@ -9,11 +9,11 @@ const getAccordionItem = ({
 	children,
 	disabled,
 	open,
-	title
+	headlinePlain
 }: DBAccordionItemProps & { open: boolean }) => {
 	return (
 		<DBAccordionItem
-			headlinePlain={title}
+			headlinePlain={headlinePlain}
 			disabled={disabled}
 			defaultOpen={open}>
 			{children}
diff --git a/showcases/react-showcase/src/components/brand/index.tsx b/showcases/react-showcase/src/components/brand/index.tsx
index 466f4d804e5..3903f4331f3 100644
--- a/showcases/react-showcase/src/components/brand/index.tsx
+++ b/showcases/react-showcase/src/components/brand/index.tsx
@@ -18,9 +18,7 @@ const getBrand = ({
 	className,
 	describedbyid,
 	id,
-	key,
-	tabIndex,
-	title
+	key
 }: DBBrandProps) => (
 	<DBBrand
 		imgAlt={imgAlt}
@@ -35,9 +33,7 @@ const getBrand = ({
 		className={className}
 		describedbyid={describedbyid}
 		id={id}
-		key={key}
-		tabIndex={tabIndex}
-		title={title}>
+		key={key}>
 		{children}
 	</DBBrand>
 );
diff --git a/showcases/react-showcase/src/components/checkbox/index.tsx b/showcases/react-showcase/src/components/checkbox/index.tsx
index 15d53041640..c2f1866b98a 100644
--- a/showcases/react-showcase/src/components/checkbox/index.tsx
+++ b/showcases/react-showcase/src/components/checkbox/index.tsx
@@ -9,7 +9,6 @@ const getCheckbox = ({
 	size,
 	name,
 	checked,
-	invalid,
 	required,
 	children,
 	disabled,
@@ -21,7 +20,6 @@ const getCheckbox = ({
 		size={size}
 		name={name}
 		defaultChecked={checked}
-		invalid={invalid}
 		required={required}
 		disabled={disabled}
 		variant={variant}
diff --git a/showcases/react-showcase/src/components/header/index.tsx b/showcases/react-showcase/src/components/header/index.tsx
index 754cd12c4f2..8c18102bb4f 100644
--- a/showcases/react-showcase/src/components/header/index.tsx
+++ b/showcases/react-showcase/src/components/header/index.tsx
@@ -20,8 +20,6 @@ const getHeader = ({
 	describedbyid,
 	id,
 	key,
-	tabIndex,
-	title,
 	onToggle
 }: DBHeaderProps) => (
 	<DBHeader
@@ -63,8 +61,6 @@ const getHeader = ({
 		describedbyid={describedbyid}
 		id={id}
 		key={key}
-		tabIndex={tabIndex}
-		title={title}
 		onToggle={onToggle}>
 		<DBNavigation>
 			<DBNavigationItem icon="account">
diff --git a/showcases/react-showcase/src/components/input/index.tsx b/showcases/react-showcase/src/components/input/index.tsx
index fbb1eaacb97..bdb46466873 100644
--- a/showcases/react-showcase/src/components/input/index.tsx
+++ b/showcases/react-showcase/src/components/input/index.tsx
@@ -17,8 +17,7 @@ const getInput = ({
 	children,
 	message,
 	variant,
-	readOnly,
-	invalid
+	readOnly
 }: DBInputProps) => {
 	return (
 		<DBInput
@@ -33,7 +32,6 @@ const getInput = ({
 			disabled={disabled}
 			readOnly={readOnly}
 			iconAfter={iconAfter}
-			invalid={invalid}
 			icon={icon}
 		/>
 	);
diff --git a/showcases/react-showcase/src/components/page/index.tsx b/showcases/react-showcase/src/components/page/index.tsx
index 1c2d6ae78a3..828a3c05a1e 100644
--- a/showcases/react-showcase/src/components/page/index.tsx
+++ b/showcases/react-showcase/src/components/page/index.tsx
@@ -19,9 +19,7 @@ const getPage = ({
 	className,
 	describedbyid,
 	id,
-	key,
-	tabIndex,
-	title
+	key
 }: DBPageProps) => (
 	<DBPage
 		type={type}
@@ -30,7 +28,6 @@ const getPage = ({
 		describedbyid={describedbyid}
 		id={id}
 		key={key}
-		tabIndex={tabIndex}
 		header={
 			<DBHeader
 				brand={
@@ -63,8 +60,7 @@ const getPage = ({
 							Help
 						</DBButton>
 					</>
-				}
-				title={title}>
+				}>
 				<DBNavigation>
 					<DBNavigationItem icon="account">
 						<a href="#">{children}</a>
diff --git a/showcases/react-showcase/src/components/radio/index.tsx b/showcases/react-showcase/src/components/radio/index.tsx
index a0eaf97e824..d31527d7532 100644
--- a/showcases/react-showcase/src/components/radio/index.tsx
+++ b/showcases/react-showcase/src/components/radio/index.tsx
@@ -9,7 +9,6 @@ const getRadio = ({
 	size,
 	name,
 	checked,
-	invalid,
 	required,
 	children,
 	disabled,
@@ -21,7 +20,6 @@ const getRadio = ({
 		size={size}
 		name={name}
 		defaultChecked={checked}
-		invalid={invalid}
 		required={required}
 		disabled={disabled}
 		variant={variant}
diff --git a/showcases/react-showcase/src/components/select/index.tsx b/showcases/react-showcase/src/components/select/index.tsx
index 54e7c3df1f6..965c2dd1e91 100644
--- a/showcases/react-showcase/src/components/select/index.tsx
+++ b/showcases/react-showcase/src/components/select/index.tsx
@@ -13,8 +13,7 @@ const getSelect = ({
 	disabled,
 	value,
 	required,
-	variant,
-	invalid
+	variant
 }: DBSelectProps) => (
 	<DBSelect
 		label={label}
@@ -25,14 +24,7 @@ const getSelect = ({
 		icon={icon}
 		value={value}
 		message={message}
-		invalid={invalid}
-		required={required}
-		invalidMessage={
-			invalid !== undefined || required ? 'Invalid Message' : undefined
-		}
-		validMessage={
-			invalid !== undefined || required ? 'Valid Message' : undefined
-		}>
+		required={required}>
 		{children}
 	</DBSelect>
 );
diff --git a/showcases/react-showcase/src/components/textarea/index.tsx b/showcases/react-showcase/src/components/textarea/index.tsx
index 53e3570f1ec..5de9f8225ee 100644
--- a/showcases/react-showcase/src/components/textarea/index.tsx
+++ b/showcases/react-showcase/src/components/textarea/index.tsx
@@ -16,7 +16,6 @@ const getTextarea = ({
 	readOnly,
 	required,
 	children,
-	invalid,
 	variant
 }: DBTextareaProps) => {
 	const [dynamicValue, setDynamicValue] = useState<string>(value);
@@ -35,15 +34,6 @@ const getTextarea = ({
 			placeholder={placeholder ?? children}
 			rows={rows}
 			value={dynamicValue}
-			invalid={invalid}
-			invalidMessage={
-				invalid !== undefined || required
-					? 'Invalid Message'
-					: undefined
-			}
-			validMessage={
-				invalid !== undefined || required ? 'Valid Message' : undefined
-			}
 		/>
 	);
 };
diff --git a/showcases/shared/accordion-item.json b/showcases/shared/accordion-item.json
index 8c559e7ac83..19b55d6b8ac 100644
--- a/showcases/shared/accordion-item.json
+++ b/showcases/shared/accordion-item.json
@@ -6,21 +6,21 @@
 				"name": "Functional",
 				"className": "db-density-functional",
 				"props": {
-					"title": "Functional"
+					"headlinePlain": "Functional"
 				}
 			},
 			{
 				"name": "(Default) Regular",
 				"className": "db-density-regular",
 				"props": {
-					"title": "(Default) Regular"
+					"headlinePlain": "(Default) Regular"
 				}
 			},
 			{
 				"name": "Expressive",
 				"className": "db-density-expressive",
 				"props": {
-					"title": "Expressive"
+					"headlinePlain": "Expressive"
 				}
 			}
 		]
@@ -31,13 +31,13 @@
 			{
 				"name": "Enabled (Default)/Hover/Pressed",
 				"props": {
-					"title": "Enabled (Default)/Hover/Pressed"
+					"headlinePlain": "Enabled (Default)/Hover/Pressed"
 				}
 			},
 			{
 				"name": "Disabled",
 				"props": {
-					"title": "Disabled",
+					"headlinePlain": "Disabled",
 					"disabled": true
 				}
 			}
@@ -49,13 +49,13 @@
 			{
 				"name": "(Default) Collapsed",
 				"props": {
-					"title": "(Default) Collapsed"
+					"headlinePlain": "(Default) Collapsed"
 				}
 			},
 			{
 				"name": "Open",
 				"props": {
-					"title": "Open",
+					"headlinePlain": "Open",
 					"open": true
 				}
 			}
diff --git a/showcases/shared/accordion.json b/showcases/shared/accordion.json
index ff85d06700a..7f020cc3e8d 100644
--- a/showcases/shared/accordion.json
+++ b/showcases/shared/accordion.json
@@ -8,9 +8,9 @@
 				"props": {},
 				"code": {
 					"html": "The accordion is a pure JS Component",
-					"angular": "<db-accordion>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 1\"\n\t\t\t\t\tcontent=\"Content 1\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 2\"\n\t\t\t\t\tcontent=\"Content 2\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 3\"\n\t\t\t\t\tcontent=\"Content 3\"\n\t\t\t\t></db-accordion-item>\n\t\t\t</db-accordion>",
-					"react": "<DBAccordion>\n\t\t\t<DBAccordionItem title=\"Item 1\" content=\"Content 1\" />\n\t\t\t<DBAccordionItem title=\"Item 2\" content=\"Content 2\" />\n\t\t\t<DBAccordionItem title=\"Item 3\" content=\"Content 3\" />\n\t\t</DBAccordion>",
-					"vue": "<DBAccordion>\n\t\t\t\t<DBAccordionItem title=\"Item 1\" content=\"Content 1\" />\n\t\t\t\t<DBAccordionItem title=\"Item 2\" content=\"Content 2\" />\n\t\t\t\t<DBAccordionItem title=\"Item 3\" content=\"Content 3\" />\n\t\t\t</DBAccordion>"
+					"angular": "<db-accordion>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 1\"\n\t\t\t\t\tcontent=\"Content 1\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 2\"\n\t\t\t\t\tcontent=\"Content 2\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 3\"\n\t\t\t\t\tcontent=\"Content 3\"\n\t\t\t\t></db-accordion-item>\n\t\t\t</db-accordion>",
+					"react": "<DBAccordion>\n\t\t\t<DBAccordionItem headline=\"Item 1\" content=\"Content 1\" />\n\t\t\t<DBAccordionItem headline=\"Item 2\" content=\"Content 2\" />\n\t\t\t<DBAccordionItem headline=\"Item 3\" content=\"Content 3\" />\n\t\t</DBAccordion>",
+					"vue": "<DBAccordion>\n\t\t\t\t<DBAccordionItem headline=\"Item 1\" content=\"Content 1\" />\n\t\t\t\t<DBAccordionItem headline=\"Item 2\" content=\"Content 2\" />\n\t\t\t\t<DBAccordionItem headline=\"Item 3\" content=\"Content 3\" />\n\t\t\t</DBAccordion>"
 				}
 			},
 			{
@@ -19,9 +19,9 @@
 				"props": {},
 				"code": {
 					"html": "The accordion is a pure JS Component",
-					"angular": "<db-accordion>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 1\"\n\t\t\t\t\tcontent=\"Content 1\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 2\"\n\t\t\t\t\tcontent=\"Content 2\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 3\"\n\t\t\t\t\tcontent=\"Content 3\"\n\t\t\t\t></db-accordion-item>\n\t\t\t</db-accordion>",
-					"react": "<DBAccordion>\n\t\t\t<DBAccordionItem title=\"Item 1\" content=\"Content 1\" />\n\t\t\t<DBAccordionItem title=\"Item 2\" content=\"Content 2\" />\n\t\t\t<DBAccordionItem title=\"Item 3\" content=\"Content 3\" />\n\t\t</DBAccordion>",
-					"vue": "<DBAccordion>\n\t\t\t\t<DBAccordionItem title=\"Item 1\" content=\"Content 1\" />\n\t\t\t\t<DBAccordionItem title=\"Item 2\" content=\"Content 2\" />\n\t\t\t\t<DBAccordionItem title=\"Item 3\" content=\"Content 3\" />\n\t\t\t</DBAccordion>"
+					"angular": "<db-accordion>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 1\"\n\t\t\t\t\tcontent=\"Content 1\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 2\"\n\t\t\t\t\tcontent=\"Content 2\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 3\"\n\t\t\t\t\tcontent=\"Content 3\"\n\t\t\t\t></db-accordion-item>\n\t\t\t</db-accordion>",
+					"react": "<DBAccordion>\n\t\t\t<DBAccordionItem headline=\"Item 1\" content=\"Content 1\" />\n\t\t\t<DBAccordionItem headline=\"Item 2\" content=\"Content 2\" />\n\t\t\t<DBAccordionItem headline=\"Item 3\" content=\"Content 3\" />\n\t\t</DBAccordion>",
+					"vue": "<DBAccordion>\n\t\t\t\t<DBAccordionItem headline=\"Item 1\" content=\"Content 1\" />\n\t\t\t\t<DBAccordionItem headline=\"Item 2\" content=\"Content 2\" />\n\t\t\t\t<DBAccordionItem headline=\"Item 3\" content=\"Content 3\" />\n\t\t\t</DBAccordion>"
 				}
 			},
 			{
@@ -30,9 +30,9 @@
 				"props": {},
 				"code": {
 					"html": "The accordion is a pure JS Component",
-					"angular": "<db-accordion>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 1\"\n\t\t\t\t\tcontent=\"Content 1\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 2\"\n\t\t\t\t\tcontent=\"Content 2\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 3\"\n\t\t\t\t\tcontent=\"Content 3\"\n\t\t\t\t></db-accordion-item>\n\t\t\t</db-accordion>",
-					"react": "<DBAccordion>\n\t\t\t<DBAccordionItem title=\"Item 1\" content=\"Content 1\" />\n\t\t\t<DBAccordionItem title=\"Item 2\" content=\"Content 2\" />\n\t\t\t<DBAccordionItem title=\"Item 3\" content=\"Content 3\" />\n\t\t</DBAccordion>",
-					"vue": "<DBAccordion>\n\t\t\t\t<DBAccordionItem title=\"Item 1\" content=\"Content 1\" />\n\t\t\t\t<DBAccordionItem title=\"Item 2\" content=\"Content 2\" />\n\t\t\t\t<DBAccordionItem title=\"Item 3\" content=\"Content 3\" />\n\t\t\t</DBAccordion>"
+					"angular": "<db-accordion>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 1\"\n\t\t\t\t\tcontent=\"Content 1\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 2\"\n\t\t\t\t\tcontent=\"Content 2\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 3\"\n\t\t\t\t\tcontent=\"Content 3\"\n\t\t\t\t></db-accordion-item>\n\t\t\t</db-accordion>",
+					"react": "<DBAccordion>\n\t\t\t<DBAccordionItem headline=\"Item 1\" content=\"Content 1\" />\n\t\t\t<DBAccordionItem headline=\"Item 2\" content=\"Content 2\" />\n\t\t\t<DBAccordionItem headline=\"Item 3\" content=\"Content 3\" />\n\t\t</DBAccordion>",
+					"vue": "<DBAccordion>\n\t\t\t\t<DBAccordionItem headline=\"Item 1\" content=\"Content 1\" />\n\t\t\t\t<DBAccordionItem headline=\"Item 2\" content=\"Content 2\" />\n\t\t\t\t<DBAccordionItem headline=\"Item 3\" content=\"Content 3\" />\n\t\t\t</DBAccordion>"
 				}
 			}
 		]
@@ -74,9 +74,9 @@
 				},
 				"code": {
 					"html": "The accordion is a pure JS Component",
-					"angular": "<db-accordion>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 1\"\n\t\t\t\t\tcontent=\"Content 1\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 2\"\n\t\t\t\t\tcontent=\"Content 2\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 3\"\n\t\t\t\t\tcontent=\"Content 3\"\n\t\t\t\t></db-accordion-item>\n\t\t\t</db-accordion>",
-					"react": "<DBAccordion>\n\t\t\t<DBAccordionItem title=\"Item 1\" content=\"Content 1\" />\n\t\t\t<DBAccordionItem title=\"Item 2\" content=\"Content 2\" />\n\t\t\t<DBAccordionItem title=\"Item 3\" content=\"Content 3\" />\n\t\t</DBAccordion>",
-					"vue": "<DBAccordion>\n\t\t\t\t<DBAccordionItem title=\"Item 1\" content=\"Content 1\" />\n\t\t\t\t<DBAccordionItem title=\"Item 2\" content=\"Content 2\" />\n\t\t\t\t<DBAccordionItem title=\"Item 3\" content=\"Content 3\" />\n\t\t\t</DBAccordion>"
+					"angular": "<db-accordion>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 1\"\n\t\t\t\t\tcontent=\"Content 1\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 2\"\n\t\t\t\t\tcontent=\"Content 2\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 3\"\n\t\t\t\t\tcontent=\"Content 3\"\n\t\t\t\t></db-accordion-item>\n\t\t\t</db-accordion>",
+					"react": "<DBAccordion>\n\t\t\t<DBAccordionItem headline=\"Item 1\" content=\"Content 1\" />\n\t\t\t<DBAccordionItem headline=\"Item 2\" content=\"Content 2\" />\n\t\t\t<DBAccordionItem headline=\"Item 3\" content=\"Content 3\" />\n\t\t</DBAccordion>",
+					"vue": "<DBAccordion>\n\t\t\t\t<DBAccordionItem headline=\"Item 1\" content=\"Content 1\" />\n\t\t\t\t<DBAccordionItem headline=\"Item 2\" content=\"Content 2\" />\n\t\t\t\t<DBAccordionItem headline=\"Item 3\" content=\"Content 3\" />\n\t\t\t</DBAccordion>"
 				}
 			},
 			{
@@ -86,9 +86,9 @@
 				},
 				"code": {
 					"html": "The accordion is a pure JS Component",
-					"angular": "<db-accordion behaviour=\"single\">\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 1\"\n\t\t\t\t\tcontent=\"Content 1\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 2\"\n\t\t\t\t\tcontent=\"Content 2\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\ttitle=\"Item 3\"\n\t\t\t\t\tcontent=\"Content 3\"\n\t\t\t\t></db-accordion-item>\n\t\t\t</db-accordion>",
-					"react": "<DBAccordion behaviour=\"single\">\n\t\t\t<DBAccordionItem title=\"Item 1\" content=\"Content 1\" />\n\t\t\t<DBAccordionItem title=\"Item 2\" content=\"Content 2\" />\n\t\t\t<DBAccordionItem title=\"Item 3\" content=\"Content 3\" />\n\t\t</DBAccordion>",
-					"vue": "<DBAccordion behaviour=\"single\">\n\t\t\t\t<DBAccordionItem title=\"Item 1\" content=\"Content 1\" />\n\t\t\t\t<DBAccordionItem title=\"Item 2\" content=\"Content 2\" />\n\t\t\t\t<DBAccordionItem title=\"Item 3\" content=\"Content 3\" />\n\t\t\t</DBAccordion>"
+					"angular": "<db-accordion behaviour=\"single\">\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 1\"\n\t\t\t\t\tcontent=\"Content 1\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 2\"\n\t\t\t\t\tcontent=\"Content 2\"\n\t\t\t\t></db-accordion-item>\n\t\t\t\t<db-accordion-item\n\t\t\t\t\theadline=\"Item 3\"\n\t\t\t\t\tcontent=\"Content 3\"\n\t\t\t\t></db-accordion-item>\n\t\t\t</db-accordion>",
+					"react": "<DBAccordion behaviour=\"single\">\n\t\t\t<DBAccordionItem headline=\"Item 1\" content=\"Content 1\" />\n\t\t\t<DBAccordionItem headline=\"Item 2\" content=\"Content 2\" />\n\t\t\t<DBAccordionItem headline=\"Item 3\" content=\"Content 3\" />\n\t\t</DBAccordion>",
+					"vue": "<DBAccordion behaviour=\"single\">\n\t\t\t\t<DBAccordionItem headline=\"Item 1\" content=\"Content 1\" />\n\t\t\t\t<DBAccordionItem headline=\"Item 2\" content=\"Content 2\" />\n\t\t\t\t<DBAccordionItem headline=\"Item 3\" content=\"Content 3\" />\n\t\t\t</DBAccordion>"
 				}
 			}
 		]
diff --git a/showcases/shared/checkbox.json b/showcases/shared/checkbox.json
index 043f3f68e60..5ea644dd663 100644
--- a/showcases/shared/checkbox.json
+++ b/showcases/shared/checkbox.json
@@ -25,6 +25,24 @@
 			}
 		]
 	},
+	{
+		"name": "Interaction States",
+		"examples": [
+			{
+				"name": "(Default) Enabled",
+				"props": {
+					"name": "Interaction States"
+				}
+			},
+			{
+				"name": "Disabled",
+				"props": {
+					"name": "Interaction States",
+					"disabled": true
+				}
+			}
+		]
+	},
 	{
 		"name": "States",
 		"examples": [
@@ -35,49 +53,49 @@
 				}
 			},
 			{
-				"name": "Checked",
+				"name": "Unchecked - Invalid",
 				"props": {
 					"name": "States",
-					"checked": true
+					"required": true
 				}
 			},
 			{
-				"name": "Indeterminate",
+				"name": "Checked",
 				"props": {
 					"name": "States",
-					"indeterminate": true
+					"checked": true
 				}
 			},
 			{
-				"name": "Disabled",
+				"name": "Checked - Valid",
 				"props": {
 					"name": "States",
-					"disabled": true
+					"required": true,
+					"checked": true
 				}
-			}
-		]
-	},
-	{
-		"name": "Requirement",
-		"examples": [
+			},
 			{
-				"name": "(Default) Optional",
+				"name": "Indeterminate",
 				"props": {
-					"name": "Requirement"
+					"name": "States",
+					"indeterminate": true
 				}
 			},
 			{
-				"name": "Required",
+				"name": "Indeterminate - Invalid",
 				"props": {
-					"name": "Requirement",
+					"name": "States",
+					"indeterminate": true,
 					"required": true
 				}
 			},
 			{
-				"name": "Required - Indeterminate",
+				"name": "Indeterminate - Valid",
 				"props": {
-					"name": "Requirement",
-					"indeterminate": true
+					"name": "States",
+					"indeterminate": true,
+					"required": true,
+					"checked": true
 				}
 			}
 		]
@@ -101,7 +119,32 @@
 		]
 	},
 	{
-		"name": "Variant Label",
+		"name": "Requirement",
+		"examples": [
+			{
+				"name": "(Default) Optional",
+				"props": {
+					"name": "Requirement"
+				}
+			},
+			{
+				"name": "Required",
+				"props": {
+					"name": "Requirement",
+					"required": true
+				}
+			},
+			{
+				"name": "Required - Indeterminate",
+				"props": {
+					"name": "Requirement",
+					"indeterminate": true
+				}
+			}
+		]
+	},
+	{
+		"name": "Content",
 		"examples": [
 			{
 				"name": "(Default) Label",
@@ -110,7 +153,7 @@
 				}
 			},
 			{
-				"name": "Hidden Label",
+				"name": "No Label",
 				"props": {
 					"name": "Content",
 					"variant": "hidden"
diff --git a/showcases/shared/radio.json b/showcases/shared/radio.json
index 0e02f995cc6..065df25fcdb 100644
--- a/showcases/shared/radio.json
+++ b/showcases/shared/radio.json
@@ -29,45 +29,53 @@
 		]
 	},
 	{
-		"name": "States",
+		"name": "Interaction States",
 		"examples": [
 			{
-				"name": "(Default) Unchecked",
-				"props": {
-					"name": "States"
-				}
-			},
-			{
-				"name": "Checked",
+				"name": "(Default) Enabled",
 				"props": {
-					"name": "States",
-					"checked": true
+					"name": "Interaction States"
 				}
 			},
 			{
 				"name": "Disabled",
 				"props": {
-					"name": "States",
+					"name": "Interaction States",
 					"disabled": true
 				}
 			}
 		]
 	},
 	{
-		"name": "Requirement",
+		"name": "States",
 		"examples": [
 			{
-				"name": "(Default) Optional",
+				"name": "(Default) Unselected",
 				"props": {
-					"name": "Requirement"
+					"name": "States"
 				}
 			},
 			{
-				"name": "Required",
+				"name": "Unselected - Invalid",
 				"props": {
-					"name": "Requirement",
+					"name": "States Required",
 					"required": true
 				}
+			},
+			{
+				"name": "Selected",
+				"props": {
+					"name": "States",
+					"checked": true
+				}
+			},
+			{
+				"name": "Selected - Valid",
+				"props": {
+					"name": "States Required",
+					"required": true,
+					"checked": true
+				}
 			}
 		]
 	},
@@ -90,7 +98,25 @@
 		]
 	},
 	{
-		"name": "Variant Label",
+		"name": "Requirement",
+		"examples": [
+			{
+				"name": "(Default) Optional",
+				"props": {
+					"name": "Requirement"
+				}
+			},
+			{
+				"name": "Required",
+				"props": {
+					"name": "Requirement",
+					"required": true
+				}
+			}
+		]
+	},
+	{
+		"name": "Content",
 		"examples": [
 			{
 				"name": "(Default) Label",
diff --git a/showcases/vue-showcase/src/components/accordion-item/AccordionItem.vue b/showcases/vue-showcase/src/components/accordion-item/AccordionItem.vue
index 7732f82c585..46f449884b6 100644
--- a/showcases/vue-showcase/src/components/accordion-item/AccordionItem.vue
+++ b/showcases/vue-showcase/src/components/accordion-item/AccordionItem.vue
@@ -14,7 +14,7 @@ import { ref } from "vue";
 			#example="{ exampleIndex, variantIndex, exampleName, exampleProps }"
 		>
 			<DBAccordionItem
-				:headlinePlain="exampleProps.title"
+				:headlinePlain="exampleProps.headlinePlain"
 				:disabled="exampleProps.disabled"
 				:default-open="exampleProps.open"
 			>
diff --git a/showcases/vue-showcase/src/components/checkbox/Checkbox.vue b/showcases/vue-showcase/src/components/checkbox/Checkbox.vue
index 006977aa863..5bb880ffd0f 100644
--- a/showcases/vue-showcase/src/components/checkbox/Checkbox.vue
+++ b/showcases/vue-showcase/src/components/checkbox/Checkbox.vue
@@ -18,7 +18,6 @@ import { DBCheckbox } from "../../../../../output/vue/src";
 				:value="exampleProps.value"
 				:required="exampleProps.required"
 				:indeterminate="exampleProps.indeterminate"
-				:invalid="exampleProps.invalid"
 				:size="exampleProps.size"
 				>{{ exampleName }}</DBCheckbox
 			>
diff --git a/showcases/vue-showcase/src/components/input/Input.vue b/showcases/vue-showcase/src/components/input/Input.vue
index 0fca6b3ca6a..1e28f6167ad 100644
--- a/showcases/vue-showcase/src/components/input/Input.vue
+++ b/showcases/vue-showcase/src/components/input/Input.vue
@@ -20,18 +20,7 @@ import { DBInput } from "../../../../../output/vue/src";
 				:disabled="exampleProps.disabled"
 				:value="exampleProps.value"
 				:icon="exampleProps.icon"
-				:invalid="exampleProps.invalid"
 				:iconAfter="exampleProps.iconAfter"
-				:invalidMessage="
-					exampleProps.invalid !== undefined || exampleProps.required
-						? 'Invalid Message'
-						: undefined
-				"
-				:validMessage="
-					exampleProps.invalid !== undefined || exampleProps.required
-						? 'Valid Message'
-						: undefined
-				"
 			></DBInput>
 		</template>
 	</DefaultComponent>
diff --git a/showcases/vue-showcase/src/components/radio/Radio.vue b/showcases/vue-showcase/src/components/radio/Radio.vue
index b261b4171b3..f8bf51989b5 100644
--- a/showcases/vue-showcase/src/components/radio/Radio.vue
+++ b/showcases/vue-showcase/src/components/radio/Radio.vue
@@ -14,7 +14,6 @@ import { DBRadio } from "../../../../../output/vue/src";
 				:size="exampleProps.size"
 				:name="exampleProps.name"
 				:checked="exampleProps.checked"
-				:invalid="exampleProps.invalid"
 				:value="exampleProps.value"
 				:required="exampleProps.required"
 				:variant="exampleProps.variant"
diff --git a/showcases/vue-showcase/src/components/select/Select.vue b/showcases/vue-showcase/src/components/select/Select.vue
index dea56aa7a2d..9f05b31bab3 100644
--- a/showcases/vue-showcase/src/components/select/Select.vue
+++ b/showcases/vue-showcase/src/components/select/Select.vue
@@ -19,16 +19,6 @@ import { DBInput, DBSelect } from "../../../../../output/vue/src";
 				:value="exampleProps.value"
 				:message="exampleProps.message"
 				:required="exampleProps.required"
-				:invalidMessage="
-					exampleProps.invalid !== undefined || exampleProps.required
-						? 'Invalid Message'
-						: undefined
-				"
-				:validMessage="
-					exampleProps.invalid !== undefined || exampleProps.required
-						? 'Valid Message'
-						: undefined
-				"
 			>
 				{{ exampleName }}
 			</DBSelect>
diff --git a/showcases/vue-showcase/src/components/textarea/Textarea.vue b/showcases/vue-showcase/src/components/textarea/Textarea.vue
index c23107e18cd..f0a5a070e80 100644
--- a/showcases/vue-showcase/src/components/textarea/Textarea.vue
+++ b/showcases/vue-showcase/src/components/textarea/Textarea.vue
@@ -19,18 +19,7 @@ import { DBInput, DBTextarea } from "../../../../../output/vue/src";
 				:placeholder="exampleProps.placeholder || exampleName"
 				:rows="exampleProps.rows"
 				:value="exampleProps.value"
-				:invalid="exampleProps.invalid"
 				:variant="exampleProps.variant"
-				:invalidMessage="
-					exampleProps.invalid !== undefined || exampleProps.required
-						? 'Invalid Message'
-						: undefined
-				"
-				:validMessage="
-					exampleProps.invalid !== undefined || exampleProps.required
-						? 'Valid Message'
-						: undefined
-				"
 			></DBTextarea>
 		</template>
 	</DefaultComponent>