diff --git a/docs/migration/v0.4.x-to-v0.5.x.md b/docs/migration/v0.4.x-to-v0.5.x.md
new file mode 100644
index 00000000000..07e91ec3eb1
--- /dev/null
+++ b/docs/migration/v0.4.x-to-v0.5.x.md
@@ -0,0 +1,3 @@
+## Migration Beta (0.4.x) ➡ Beta (0.5.x)
+
+No breaking changes
diff --git a/docs/migration/v0.5.x-to-v0.6.x.md b/docs/migration/v0.5.x-to-v0.6.x.md
new file mode 100644
index 00000000000..4d4e493b408
--- /dev/null
+++ b/docs/migration/v0.5.x-to-v0.6.x.md
@@ -0,0 +1,18 @@
+## Migration Beta (0.5.x) ➡ Beta (0.6.x)
+
+### Components
+
+We changed some properties for components to align with Figma properties:
+
+#### Accordion-Item
+
+-   `content` ➡️ `text`
+
+#### Notification
+
+-   `behaviour="closeable|permanent"` ➡️ `closeable="true/false"`- Defaults to `false`
+
+#### Form-Components (Input, Select, Checkbox, Radio, Switch, Textarea)
+
+-   `variant="hidden"` ➡️ `showLabel="true/false"` - Defaults to `true`
+-   `customValidity` ➡️ `validation`
diff --git a/packages/components/src/components/accordion-item/accordion-item.lite.tsx b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
index 73c5f774a3d..2a8405667ed 100644
--- a/packages/components/src/components/accordion-item/accordion-item.lite.tsx
+++ b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
@@ -53,8 +53,8 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 				</Show>
 			</summary>
 			<div>
-				<Show when={props.content} else={props.children}>
-					{props.content}
+				<Show when={props.text} else={props.children}>
+					{props.text}
 				</Show>
 			</div>
 		</details>
diff --git a/packages/components/src/components/accordion-item/model.ts b/packages/components/src/components/accordion-item/model.ts
index c66135fa6eb..b52dc5144cb 100644
--- a/packages/components/src/components/accordion-item/model.ts
+++ b/packages/components/src/components/accordion-item/model.ts
@@ -1,15 +1,12 @@
 import {
 	GlobalProps,
 	GlobalState,
+	TextProps,
 	ToggleEventProps,
 	ToggleEventState
 } from '../../shared/model';
 
 export type DBAccordionItemDefaultProps = {
-	/**
-	 * Alternative for passing only a string instead of children
-	 */
-	content?: string;
 	/**
 	 * Initial state for the accordion item
 	 */
@@ -34,7 +31,8 @@ export type DBAccordionItemDefaultProps = {
 
 export type DBAccordionItemProps = DBAccordionItemDefaultProps &
 	GlobalProps &
-	ToggleEventProps;
+	ToggleEventProps &
+	TextProps;
 
 export type DBAccordionItemDefaultState = {
 	_open: boolean;
diff --git a/packages/components/src/components/brand/brand.lite.tsx b/packages/components/src/components/brand/brand.lite.tsx
index 0fac1db160b..c5e4135f7c0 100644
--- a/packages/components/src/components/brand/brand.lite.tsx
+++ b/packages/components/src/components/brand/brand.lite.tsx
@@ -1,5 +1,5 @@
 import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
-import { cls, getHideIcon } from '../../utils';
+import { cls, getHideProp } from '../../utils';
 import { DBBrandProps, DBBrandState } from './model';
 import { DEFAULT_ICON } from '../../shared/constants';
 
@@ -15,7 +15,7 @@ export default function DBBrand(props: DBBrandProps) {
 		<div
 			ref={ref}
 			data-icon={props.hideLogo ? 'none' : (props.icon ?? DEFAULT_ICON)}
-			data-hide-icon={getHideIcon(props.showIcon)}
+			data-hide-icon={getHideProp(props.showIcon)}
 			id={props.id}
 			class={cls('db-brand', props.className)}>
 			<Show when={props.text} else={props.children}>
diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
index 396f04321ae..13a1b5ecb7c 100644
--- a/packages/components/src/components/button/button.lite.tsx
+++ b/packages/components/src/components/button/button.lite.tsx
@@ -1,6 +1,6 @@
 import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import type { DBButtonProps, DBButtonState } from './model';
-import { cls, getBooleanAsString, getHideIcon } from '../../utils';
+import { cls, getBooleanAsString, getHideProp } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({});
@@ -27,7 +27,7 @@ export default function DBButton(props: DBButtonProps) {
 			disabled={props.disabled}
 			aria-label={props.label}
 			data-icon={props.icon}
-			data-hide-icon={getHideIcon(props.showIcon)}
+			data-hide-icon={getHideProp(props.showIcon)}
 			data-size={props.size}
 			data-state={props.state}
 			data-width={props.width}
diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
index 8acd9cf9ac0..a01a882bc4f 100644
--- a/packages/components/src/components/checkbox/checkbox.lite.tsx
+++ b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -8,7 +8,14 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import { DBCheckboxProps, DBCheckboxState } from './model';
-import { cls, delay, hasVoiceOver, uuid } from '../../utils';
+import {
+	cls,
+	delay,
+	getBooleanAsString,
+	getHideProp,
+	hasVoiceOver,
+	uuid
+} from '../../utils';
 import {
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
@@ -51,7 +58,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			});
 
 			/* For a11y reasons we need to map the correct message with the checkbox */
-			if (!ref?.validity.valid || props.customValidity === 'invalid') {
+			if (!ref?.validity.valid || props.validation === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 				if (hasVoiceOver()) {
 					state._voiceOverFallback =
@@ -61,7 +68,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
 			} else if (
-				props.customValidity === 'valid' ||
+				props.validation === 'valid' ||
 				(ref?.validity.valid && props.required)
 			) {
 				state._descByIds = state._validMessageId;
@@ -146,11 +153,11 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 		<div
 			class={cls('db-checkbox', props.className)}
 			data-size={props.size}
-			data-variant={props.variant}>
+			data-hide-label={getHideProp(props.showLabel)}>
 			<label htmlFor={state._id}>
 				<input
-					aria-invalid={props.customValidity === 'invalid'}
-					data-custom-validity={props.customValidity}
+					aria-invalid={props.validation === 'invalid'}
+					data-custom-validity={props.validation}
 					ref={ref}
 					type="checkbox"
 					id={state._id}
diff --git a/packages/components/src/components/infotext/infotext.lite.tsx b/packages/components/src/components/infotext/infotext.lite.tsx
index 7e49ea5d5f4..b5210633228 100644
--- a/packages/components/src/components/infotext/infotext.lite.tsx
+++ b/packages/components/src/components/infotext/infotext.lite.tsx
@@ -1,6 +1,6 @@
 import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBInfotextProps, DBInfotextState } from './model';
-import { cls, getHideIcon } from '../../utils';
+import { cls, getHideProp } from '../../utils';
 
 useMetadata({});
 
@@ -19,7 +19,7 @@ export default function DBInfotext(props: DBInfotextProps) {
 			data-icon={props.icon}
 			data-semantic={props.semantic}
 			data-size={props.size}
-			data-hide-icon-after={getHideIcon(props.showIcon ?? true)}>
+			data-hide-icon-after={getHideProp(props.showIcon ?? true)}>
 			<Show when={props.text} else={props.children}>
 				{props.text}
 			</Show>
diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
index 48976558921..1ca574f038b 100644
--- a/packages/components/src/components/input/input.lite.tsx
+++ b/packages/components/src/components/input/input.lite.tsx
@@ -11,7 +11,8 @@ import {
 import {
 	cls,
 	delay,
-	getHideIcon,
+	getBooleanAsString,
+	getHideProp,
 	hasVoiceOver,
 	isArrayOfStrings,
 	uuid
@@ -77,7 +78,7 @@ export default function DBInput(props: DBInputProps) {
 			});
 
 			/* For a11y reasons we need to map the correct message with the input */
-			if (!ref?.validity.valid || props.customValidity === 'invalid') {
+			if (!ref?.validity.valid || props.validation === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 				if (hasVoiceOver()) {
 					state._voiceOverFallback =
@@ -87,7 +88,7 @@ export default function DBInput(props: DBInputProps) {
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
 			} else if (
-				props.customValidity === 'valid' ||
+				props.validation === 'valid' ||
 				(ref?.validity.valid &&
 					(props.required ||
 						props.minLength ||
@@ -171,14 +172,15 @@ export default function DBInput(props: DBInputProps) {
 		<div
 			class={cls('db-input', props.className)}
 			data-variant={props.variant}
-			data-hide-icon={getHideIcon(props.showIcon)}
+			data-hide-label={getHideProp(props.showLabel)}
+			data-hide-icon={getHideProp(props.showIcon)}
 			data-icon={props.icon}
 			data-icon-after={props.iconAfter}
-			data-hide-icon-after={getHideIcon(props.showIcon)}>
+			data-hide-icon-after={getHideProp(props.showIcon)}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<input
-				aria-invalid={props.customValidity === 'invalid'}
-				data-custom-validity={props.customValidity}
+				aria-invalid={props.validation === 'invalid'}
+				data-custom-validity={props.validation}
 				ref={ref}
 				id={state._id}
 				name={props.name}
diff --git a/packages/components/src/components/input/input.scss b/packages/components/src/components/input/input.scss
index d35333f84f6..d6064f66243 100644
--- a/packages/components/src/components/input/input.scss
+++ b/packages/components/src/components/input/input.scss
@@ -26,7 +26,7 @@ $icon-padding: calc(
 		--db-form-component-padding-inline-end: #{$icon-padding};
 	}
 
-	&[data-variant="hidden"] {
+	&[data-hide-label="true"] {
 		--db-label-visible-height: 0;
 		--db-label-visible-spacing: 1;
 	}
diff --git a/packages/components/src/components/link/link.lite.tsx b/packages/components/src/components/link/link.lite.tsx
index 44813ca26e9..e316fbcbbb0 100644
--- a/packages/components/src/components/link/link.lite.tsx
+++ b/packages/components/src/components/link/link.lite.tsx
@@ -1,6 +1,6 @@
 import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBLinkProps, DBLinkState } from './model';
-import { cls, getBooleanAsString, getHideIcon } from '../../utils';
+import { cls, getBooleanAsString, getHideProp } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 import { DEFAULT_ID } from '../../shared/constants';
 
@@ -38,7 +38,7 @@ export default function DBLink(props: DBLinkProps) {
 			aria-label={props.label}
 			aria-current={props.current}
 			data-size={props.size}
-			data-hide-icon-after={getHideIcon(props.showIcon ?? true)}
+			data-hide-icon-after={getHideProp(props.showIcon ?? true)}
 			data-variant={props.variant}
 			data-content={props.content || 'internal'}
 			onClick={(event: ClickEvent<HTMLAnchorElement>) =>
diff --git a/packages/components/src/components/navigation-item/navigation-item.lite.tsx b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
index 3df164e8827..40c40ea56d2 100644
--- a/packages/components/src/components/navigation-item/navigation-item.lite.tsx
+++ b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
@@ -9,7 +9,7 @@ import {
 } from '@builder.io/mitosis';
 import { DBNavigationItemProps, DBNavigationItemState } from './model';
 import DBButton from '../button/button.lite';
-import { cls, getBooleanAsString, getHideIcon, uuid } from '../../utils';
+import { cls, getBooleanAsString, getHideProp, uuid } from '../../utils';
 import { NavigationItemSafeTriangle } from '../../utils/navigation';
 import { DEFAULT_BACK } from '../../shared/constants';
 import { ClickEvent } from '../../shared/model';
@@ -97,7 +97,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 			class={cls('db-navigation-item', props.className)}
 			data-width={props.width}
 			data-icon={props.icon}
-			data-hide-icon={getHideIcon(props.showIcon)}
+			data-hide-icon={getHideProp(props.showIcon)}
 			data-active={props.active}
 			aria-disabled={getBooleanAsString(props.disabled)}>
 			<Show when={!state.hasSubNavigation}>
diff --git a/packages/components/src/components/notification/model.ts b/packages/components/src/components/notification/model.ts
index 6607a50b8cd..d0e7bbc265f 100644
--- a/packages/components/src/components/notification/model.ts
+++ b/packages/components/src/components/notification/model.ts
@@ -26,10 +26,6 @@ export const NotificationAriaLiveList = ['assertive', 'polite', 'off'] as const;
 export type NotificationAriaLiveType =
 	(typeof NotificationAriaLiveList)[number];
 
-export const NotificationBehaviourList = ['closable', 'permanent'] as const;
-export type NotificationBehaviourType =
-	(typeof NotificationBehaviourList)[number];
-
 export type DBNotificationDefaultProps = {
 	/**
 	 * The arialive attribute will lead to that the screenreader interrupts immediately
@@ -39,9 +35,9 @@ export type DBNotificationDefaultProps = {
 	ariaLive?: NotificationAriaLiveType;
 
 	/**
-	 * The behaviour attribute shows/hides the close button on the top right.
+	 * The closeable attribute shows/hides the close button on the top right.
 	 */
-	behaviour?: NotificationBehaviourType;
+	closeable?: boolean;
 
 	/**
 	 * The headline attribute changes the text of the bold headline.
diff --git a/packages/components/src/components/notification/notification.lite.tsx b/packages/components/src/components/notification/notification.lite.tsx
index 4929c3bfac0..11e1aadbb6f 100644
--- a/packages/components/src/components/notification/notification.lite.tsx
+++ b/packages/components/src/components/notification/notification.lite.tsx
@@ -2,7 +2,7 @@ import { Show, Slot, useMetadata, useRef, useStore } from '@builder.io/mitosis';
 import { DBNotificationProps, DBNotificationState } from './model';
 import DBButton from '../button/button.lite';
 import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
-import { cls, getHideIcon } from '../../utils';
+import { cls, getHideProp } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({});
@@ -28,7 +28,7 @@ export default function DBNotification(props: DBNotificationProps) {
 			data-semantic={props.semantic}
 			data-variant={props.variant}
 			data-icon={props.icon}
-			data-hide-icon={getHideIcon(props.showIcon)}
+			data-hide-icon={getHideProp(props.showIcon)}
 			data-link-variant={props.linkVariant}>
 			<Slot name="image" />
 			<Show when={props.headline}>
@@ -45,7 +45,7 @@ export default function DBNotification(props: DBNotificationProps) {
 
 			<Slot name="link" />
 
-			<Show when={props.behaviour !== 'permanent'}>
+			<Show when={props.closeable}>
 				<DBButton
 					id={props.closeButtonId}
 					icon="cross"
diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
index 4ff4dcf98ca..e42ee772aef 100644
--- a/packages/components/src/components/radio/radio.lite.tsx
+++ b/packages/components/src/components/radio/radio.lite.tsx
@@ -8,7 +8,7 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import { DBRadioProps, DBRadioState } from './model';
-import { cls, uuid } from '../../utils';
+import { cls, getHideProp, uuid } from '../../utils';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
@@ -76,12 +76,12 @@ export default function DBRadio(props: DBRadioProps) {
 	return (
 		<label
 			data-size={props.size}
-			data-variant={props.variant}
+			data-hide-label={getHideProp(props.showLabel)}
 			class={cls('db-radio', props.className)}
 			htmlFor={state._id}>
 			<input
-				aria-invalid={props.customValidity === 'invalid'}
-				data-custom-validity={props.customValidity}
+				aria-invalid={props.validation === 'invalid'}
+				data-custom-validity={props.validation}
 				ref={ref}
 				type="radio"
 				id={state._id}
diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
index ace5f832d30..345d0978dc5 100644
--- a/packages/components/src/components/select/select.lite.tsx
+++ b/packages/components/src/components/select/select.lite.tsx
@@ -9,7 +9,14 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import { DBSelectOptionType, DBSelectProps, DBSelectState } from './model';
-import { cls, delay, getHideIcon, hasVoiceOver, uuid } from '../../utils';
+import {
+	cls,
+	delay,
+	getBooleanAsString,
+	getHideProp,
+	hasVoiceOver,
+	uuid
+} from '../../utils';
 import {
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
@@ -80,7 +87,7 @@ export default function DBSelect(props: DBSelectProps) {
 			});
 
 			/* For a11y reasons we need to map the correct message with the select */
-			if (!ref?.validity.valid || props.customValidity === 'invalid') {
+			if (!ref?.validity.valid || props.validation === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 				if (hasVoiceOver()) {
 					state._voiceOverFallback =
@@ -90,7 +97,7 @@ export default function DBSelect(props: DBSelectProps) {
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
 			} else if (
-				props.customValidity === 'valid' ||
+				props.validation === 'valid' ||
 				(ref?.validity.valid && props.required)
 			) {
 				state._descByIds = state._validMessageId;
@@ -166,12 +173,13 @@ export default function DBSelect(props: DBSelectProps) {
 		<div
 			class={cls('db-select', props.className)}
 			data-variant={props.variant}
+			data-hide-label={getHideProp(props.showLabel)}
 			data-icon={props.icon}
-			data-hide-icon={getHideIcon(props.showIcon)}>
+			data-hide-icon={getHideProp(props.showIcon)}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 			<select
-				aria-invalid={props.customValidity === 'invalid'}
-				data-custom-validity={props.customValidity}
+				aria-invalid={props.validation === 'invalid'}
+				data-custom-validity={props.validation}
 				ref={ref}
 				required={props.required}
 				disabled={props.disabled}
diff --git a/packages/components/src/components/select/select.scss b/packages/components/src/components/select/select.scss
index ded65344bc3..8a0f075c2cf 100644
--- a/packages/components/src/components/select/select.scss
+++ b/packages/components/src/components/select/select.scss
@@ -42,7 +42,7 @@ $has-before-padding: calc(
 		color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
 	}
 
-	&[data-variant="hidden"] {
+	&[data-hide-label="true"] {
 		--db-label-visible-height: 0;
 		--db-label-visible-spacing: 1;
 	}
diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx
index 4470a8c6e57..3263e303d24 100644
--- a/packages/components/src/components/switch/switch.lite.tsx
+++ b/packages/components/src/components/switch/switch.lite.tsx
@@ -7,7 +7,7 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import { DBSwitchProps, DBSwitchState } from './model';
-import { cls, uuid } from '../../utils';
+import { cls, getBooleanAsString, uuid } from '../../utils';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
@@ -67,7 +67,7 @@ export default function DBSwitch(props: DBSwitchProps) {
 		<label
 			data-visual-aid={props.visualAid}
 			data-size={props.size}
-			data-variant={props.variant}
+			data-show-label={getBooleanAsString(props.showLabel)}
 			data-emphasis={props.emphasis}
 			htmlFor={state._id}
 			class={cls('db-switch', props.className)}>
@@ -80,8 +80,8 @@ export default function DBSwitch(props: DBSwitchProps) {
 				checked={props.checked}
 				disabled={props.disabled}
 				aria-describedby={props.describedbyid}
-				aria-invalid={props.customValidity === 'invalid'}
-				data-custom-validity={props.customValidity}
+				aria-invalid={props.validation === 'invalid'}
+				data-custom-validity={props.validation}
 				name={props.name}
 				required={props.required}
 				data-aid-icon={props.icon}
diff --git a/packages/components/src/components/switch/switch.scss b/packages/components/src/components/switch/switch.scss
index e1c01883fd3..b0b7aff10f6 100644
--- a/packages/components/src/components/switch/switch.scss
+++ b/packages/components/src/components/switch/switch.scss
@@ -146,7 +146,7 @@ $checked-active-transition-size: calc(
 		}
 	}
 
-	&[data-variant="hidden"] {
+	&[data-hide-label="true"] {
 		gap: 0;
 	}
 
diff --git a/packages/components/src/components/tab-item/tab-item.lite.tsx b/packages/components/src/components/tab-item/tab-item.lite.tsx
index 3235e1e8ea5..3298e03b107 100644
--- a/packages/components/src/components/tab-item/tab-item.lite.tsx
+++ b/packages/components/src/components/tab-item/tab-item.lite.tsx
@@ -8,7 +8,7 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import type { DBTabItemProps, DBTabItemState } from './model';
-import { cls, getHideIcon } from '../../utils';
+import { cls, getHideProp } from '../../utils';
 import { ChangeEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
@@ -57,8 +57,8 @@ export default function DBTabItem(props: DBTabItemProps) {
 				htmlFor={props.id}
 				data-icon={props.icon}
 				data-icon-after={props.iconAfter}
-				data-hide-icon={getHideIcon(props.showIcon)}
-				data-hide-icon-after={getHideIcon(props.showIcon)}
+				data-hide-icon={getHideProp(props.showIcon)}
+				data-hide-icon-after={getHideProp(props.showIcon)}
 				data-no-text={props.noText}>
 				<input
 					disabled={props.disabled}
diff --git a/packages/components/src/components/tag/tag.lite.tsx b/packages/components/src/components/tag/tag.lite.tsx
index 32f18d4f70c..fc70cf40362 100644
--- a/packages/components/src/components/tag/tag.lite.tsx
+++ b/packages/components/src/components/tag/tag.lite.tsx
@@ -7,7 +7,7 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBTagProps, DBTagState } from './model';
-import { cls, getBooleanAsString, getHideIcon } from '../../utils';
+import { cls, getBooleanAsString, getHideProp } from '../../utils';
 
 useMetadata({});
 
@@ -57,7 +57,7 @@ export default function DBTag(props: DBTagProps) {
 			data-semantic={props.semantic}
 			data-emphasis={props.emphasis}
 			data-icon={props.icon}
-			data-hide-icon={getHideIcon(props.showIcon)}
+			data-hide-icon={getHideProp(props.showIcon)}
 			data-no-text={getBooleanAsString(props.noText)}
 			data-overflow={getBooleanAsString(props.overflow)}>
 			{props.children}
diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
index cb715d49e4d..a18cd0d64a2 100644
--- a/packages/components/src/components/textarea/textarea.lite.tsx
+++ b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -9,7 +9,7 @@ import {
 } from '@builder.io/mitosis';
 import { DBTextareaProps, DBTextareaState } from './model';
 import DBInfotext from '../infotext/infotext.lite';
-import { cls, delay, hasVoiceOver, uuid } from '../../utils';
+import { cls, delay, getHideProp, hasVoiceOver, uuid } from '../../utils';
 import {
 	DEFAULT_INVALID_MESSAGE,
 	DEFAULT_INVALID_MESSAGE_ID_SUFFIX,
@@ -64,7 +64,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 			});
 
 			/* For a11y reasons we need to map the correct message with the textarea */
-			if (!ref?.validity.valid || props.customValidity === 'invalid') {
+			if (!ref?.validity.valid || props.validation === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 				if (hasVoiceOver()) {
 					state._voiceOverFallback =
@@ -74,7 +74,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
 			} else if (
-				props.customValidity === 'valid' ||
+				props.validation === 'valid' ||
 				(ref?.validity.valid &&
 					(props.required || props.minLength || props.maxLength))
 			) {
@@ -139,12 +139,13 @@ export default function DBTextarea(props: DBTextareaProps) {
 	return (
 		<div
 			class={cls('db-textarea', props.className)}
-			data-variant={props.variant}>
+			data-variant={props.variant}
+			data-hide-label={getHideProp(props.showLabel)}>
 			<label htmlFor={state._id}>{props.label ?? DEFAULT_LABEL}</label>
 
 			<textarea
-				aria-invalid={props.customValidity === 'invalid'}
-				data-custom-validity={props.customValidity}
+				aria-invalid={props.validation === 'invalid'}
+				data-custom-validity={props.validation}
 				ref={ref}
 				id={state._id}
 				data-resize={props.resize}
diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
index 25b58277d8e..1507b178ad7 100644
--- a/packages/components/src/shared/model.ts
+++ b/packages/components/src/shared/model.ts
@@ -207,17 +207,13 @@ export type EmphasisProps = {
 	emphasis?: EmphasisType;
 };
 
-export const CustomValidityList = [
-	'invalid',
-	'valid',
-	'no-validation'
-] as const;
-export type CustomValidityType = (typeof CustomValidityList)[number];
+export const ValidationList = ['invalid', 'valid', 'no-validation'] as const;
+export type ValidationType = (typeof ValidationList)[number];
 export type FormProps = {
 	/**
 	 * Marks an input element as invalid (red) / valid (green) / no-validation (grey). Overwrites the :user-valid selector.
 	 */
-	customValidity?: CustomValidityType;
+	validation?: ValidationType;
 	/**
 	 * The disabled attribute can be set to keep a user from clicking on the form element.
 	 */
@@ -241,6 +237,10 @@ export type FormProps = {
 	 * When the required attribute specified, the user will be required to fill the form element before submitting the form.
 	 */
 	required?: boolean;
+	/**
+	 * Enables/disables the visibility of the label
+	 */
+	showLabel?: boolean;
 	/**
 	 * The value property is to receive results from the native form element.
 	 */
@@ -262,21 +262,14 @@ export type FormTextProps = {
 	readOnly?: boolean;
 };
 
-export const CheckVariantList = ['default', 'hidden'] as const;
-export type CheckVariantType = (typeof CheckVariantList)[number];
 export type FormCheckProps = {
 	/**
 	 * Define the radio or checkbox elements checked state
 	 */
 	checked?: boolean;
-
-	/**
-	 * Hide the label of a radio/checkbox.
-	 */
-	variant?: CheckVariantType;
 };
 
-export const LabelVariantList = ['above', 'floating', 'hidden'] as const;
+export const LabelVariantList = ['above', 'floating'] as const;
 export type LabelVariantType = (typeof LabelVariantList)[number];
 export const AutoCompleteList = [
 	'off',
diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss
index f075b5b7d52..ffe32bb9032 100644
--- a/packages/components/src/styles/_form-components.scss
+++ b/packages/components/src/styles/_form-components.scss
@@ -346,7 +346,7 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden"
 		}
 	}
 
-	&[data-variant="hidden"] {
+	&[data-hide-label="true"] {
 		label {
 			@extend %a11y-visually-hidden;
 
diff --git a/packages/components/src/utils/index.ts b/packages/components/src/utils/index.ts
index 5fcbd9fed7d..19372cb25b9 100644
--- a/packages/components/src/utils/index.ts
+++ b/packages/components/src/utils/index.ts
@@ -243,12 +243,12 @@ export const getBooleanAsString = (originBool?: boolean): any => {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const getHideIcon = (showIcon?: boolean): any => {
-	if (showIcon === undefined) {
+export const getHideProp = (show?: boolean): any => {
+	if (show === undefined) {
 		return undefined;
 	}
 
-	return getBooleanAsString(!showIcon);
+	return getBooleanAsString(!show);
 };
 
 export default {
@@ -265,5 +265,5 @@ export default {
 	delay,
 	enableCustomElementAttributePassing,
 	getBooleanAsString,
-	getHideIcon
+	getHideIcon: getHideProp
 };
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 a7f45f6f72a..feec7f0f281 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,7 @@
 			[value]="exampleProps?.value"
 			[required]="exampleProps?.required"
 			[indeterminate]="exampleProps?.indeterminate"
-			[variant]="exampleProps?.variant"
+			[showLabel]="exampleProps?.showLabel"
 			[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 1545d0546f9..6520f125a81 100644
--- a/showcases/angular-showcase/src/app/components/input/input.component.html
+++ b/showcases/angular-showcase/src/app/components/input/input.component.html
@@ -23,6 +23,7 @@
 			[icon]="exampleProps?.icon"
 			[iconAfter]="exampleProps?.iconAfter"
 			[readOnly]="exampleProps?.readOnly"
+			[showLabel]="exampleProps?.showLabel"
 			[dataList]="
 				exampleProps?.dataList
 					? getDataList(exampleProps?.variant)
diff --git a/showcases/angular-showcase/src/app/components/input/input.component.ts b/showcases/angular-showcase/src/app/components/input/input.component.ts
index f49630e934a..d350fa95207 100644
--- a/showcases/angular-showcase/src/app/components/input/input.component.ts
+++ b/showcases/angular-showcase/src/app/components/input/input.component.ts
@@ -2,6 +2,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/input.json';
 import { DefaultComponent } from '../default.component';
 import {
+	DBCheckbox,
 	DBInput,
 	LabelVariantType,
 	ValueLabelType
@@ -11,9 +12,12 @@ import { environment } from '../../../environments/environment';
 @Component({
 	selector: 'app-input',
 	templateUrl: './input.component.html',
-	imports: environment.webComponents
-		? [DefaultComponent]
-		: [DefaultComponent, DBInput],
+	imports: [
+		environment.webComponents
+			? [DefaultComponent]
+			: [DefaultComponent, DBInput],
+		DBCheckbox
+	],
 	standalone: true,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
diff --git a/showcases/angular-showcase/src/app/components/notification/notification.component.html b/showcases/angular-showcase/src/app/components/notification/notification.component.html
index 866f9110c59..ffef1e818bc 100644
--- a/showcases/angular-showcase/src/app/components/notification/notification.component.html
+++ b/showcases/angular-showcase/src/app/components/notification/notification.component.html
@@ -15,7 +15,7 @@
 			[headline]="exampleProps?.headline"
 			[linkVariant]="exampleProps?.linkVariant"
 			[icon]="exampleProps?.icon"
-			[behaviour]="exampleProps?.behaviour"
+			[closeable]="exampleProps?.closeable"
 			[variant]="exampleProps?.variant"
 			[timestamp]="exampleProps?.timestamp"
 			(onClose)="showNotification(exampleName)"
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 c00bf1cda7d..0b6fa9877a2 100644
--- a/showcases/angular-showcase/src/app/components/radio/radio.component.html
+++ b/showcases/angular-showcase/src/app/components/radio/radio.component.html
@@ -18,7 +18,7 @@
 			[checked]="exampleProps?.checked"
 			[required]="exampleProps?.required"
 			[disabled]="exampleProps?.disabled"
-			[variant]="exampleProps?.variant"
+			[showLabel]="exampleProps?.showLabel"
 		>
 			{{ exampleName }}
 		</db-radio>
diff --git a/showcases/angular-showcase/src/app/components/radio/radio.component.ts b/showcases/angular-showcase/src/app/components/radio/radio.component.ts
index 86bdf1666c6..115d8c6b435 100644
--- a/showcases/angular-showcase/src/app/components/radio/radio.component.ts
+++ b/showcases/angular-showcase/src/app/components/radio/radio.component.ts
@@ -1,15 +1,18 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/radio.json';
 import { DefaultComponent } from '../default.component';
-import { DBRadio } from '../../../../../../output/angular/src';
+import { DBCheckbox, DBRadio } from '../../../../../../output/angular/src';
 import { environment } from '../../../environments/environment';
 
 @Component({
 	selector: 'app-radio',
 	templateUrl: './radio.component.html',
-	imports: environment.webComponents
-		? [DefaultComponent]
-		: [DefaultComponent, DBRadio],
+	imports: [
+		environment.webComponents
+			? [DefaultComponent]
+			: [DefaultComponent, DBRadio],
+		DBCheckbox
+	],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	standalone: true
 })
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 3efbe31ad13..b51738a8eb3 100644
--- a/showcases/angular-showcase/src/app/components/select/select.component.html
+++ b/showcases/angular-showcase/src/app/components/select/select.component.html
@@ -14,6 +14,7 @@
 			[label]="exampleProps?.label"
 			[placeholder]="exampleName"
 			[variant]="exampleProps?.variant"
+			[showLabel]="exampleProps?.showLabel"
 			[options]="exampleProps?.options"
 			[disabled]="exampleProps?.disabled"
 			[icon]="exampleProps?.icon"
diff --git a/showcases/angular-showcase/src/app/components/select/select.component.ts b/showcases/angular-showcase/src/app/components/select/select.component.ts
index cd573a5aff5..841a8f8d3e2 100644
--- a/showcases/angular-showcase/src/app/components/select/select.component.ts
+++ b/showcases/angular-showcase/src/app/components/select/select.component.ts
@@ -1,15 +1,18 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/select.json';
 import { DefaultComponent } from '../default.component';
-import { DBSelect } from '../../../../../../output/angular/src';
+import { DBCheckbox, DBSelect } from '../../../../../../output/angular/src';
 import { environment } from '../../../environments/environment';
 
 @Component({
 	selector: 'app-select',
 	templateUrl: './select.component.html',
-	imports: environment.webComponents
-		? [DefaultComponent]
-		: [DefaultComponent, DBSelect],
+	imports: [
+		environment.webComponents
+			? [DefaultComponent]
+			: [DefaultComponent, DBSelect],
+		DBCheckbox
+	],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	standalone: true
 })
diff --git a/showcases/angular-showcase/src/app/components/switch/switch.component.html b/showcases/angular-showcase/src/app/components/switch/switch.component.html
index 9bc96c3d043..726f2c23cff 100644
--- a/showcases/angular-showcase/src/app/components/switch/switch.component.html
+++ b/showcases/angular-showcase/src/app/components/switch/switch.component.html
@@ -14,7 +14,7 @@
 			[visualAid]="exampleProps?.visualAid"
 			[checked]="exampleProps?.checked"
 			[disabled]="exampleProps?.disabled"
-			[variant]="exampleProps?.variant"
+			[showLabel]="exampleProps?.showLabel"
 			[size]="exampleProps?.size"
 			[emphasis]="exampleProps?.emphasis"
 			[icon]="exampleProps?.icon"
diff --git a/showcases/angular-showcase/src/app/components/switch/switch.component.ts b/showcases/angular-showcase/src/app/components/switch/switch.component.ts
index 39ad33e4b99..facbc818b62 100644
--- a/showcases/angular-showcase/src/app/components/switch/switch.component.ts
+++ b/showcases/angular-showcase/src/app/components/switch/switch.component.ts
@@ -1,4 +1,5 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { DBCheckbox } from '@db-ui/ngx-components/src';
 import { DefaultComponent } from '../default.component';
 import defaultComponentVariants from '../../../../../shared/switch.json';
 import { DBSwitch } from '../../../../../../output/angular/src/components/switch';
@@ -8,9 +9,12 @@ import { environment } from '../../../environments/environment';
 @Component({
 	selector: 'app-switch',
 	templateUrl: './switch.component.html',
-	imports: environment.webComponents
-		? [DefaultComponent]
-		: [DefaultComponent, DBSwitch, DBInfotext],
+	imports: [
+		environment.webComponents
+			? [DefaultComponent]
+			: [DefaultComponent, DBSwitch, DBInfotext],
+		DBCheckbox
+	],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	standalone: true
 })
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 2a02a2e2501..d338713912b 100644
--- a/showcases/angular-showcase/src/app/components/textarea/textarea.component.html
+++ b/showcases/angular-showcase/src/app/components/textarea/textarea.component.html
@@ -19,6 +19,7 @@
 			[value]="exampleProps?.value"
 			[cols]="exampleProps?.cols"
 			[rows]="exampleProps?.rows"
+			[showLabel]="exampleProps?.showLabel"
 			[placeholder]="exampleProps?.placeholder || exampleName"
 			[message]="exampleProps?.message"
 		></db-textarea>
diff --git a/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts b/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts
index 8934363ff84..4839f93eb9f 100644
--- a/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts
+++ b/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts
@@ -1,15 +1,18 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/textarea.json';
 import { DefaultComponent } from '../default.component';
-import { DBTextarea } from '../../../../../../output/angular/src';
+import { DBCheckbox, DBTextarea } from '../../../../../../output/angular/src';
 import { environment } from '../../../environments/environment';
 
 @Component({
 	selector: 'app-textarea',
 	templateUrl: './textarea.component.html',
-	imports: environment.webComponents
-		? [DefaultComponent]
-		: [DefaultComponent, DBTextarea],
+	imports: [
+		environment.webComponents
+			? [DefaultComponent]
+			: [DefaultComponent, DBTextarea],
+		DBCheckbox
+	],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	standalone: true
 })
diff --git a/showcases/patternhub/components/validation-example/index.tsx b/showcases/patternhub/components/validation-example/index.tsx
index 67308a52add..77a35bae7c4 100644
--- a/showcases/patternhub/components/validation-example/index.tsx
+++ b/showcases/patternhub/components/validation-example/index.tsx
@@ -12,7 +12,7 @@ const ValidationExample = () => {
 
 			<div className="validity-container">
 				<DBCard>
-					<h4>No customValidity</h4>
+					<h4>No custom validation</h4>
 					<DBInfotext semantic="informational">
 						<span>
 							default browser behaviour with auto changing colors
@@ -31,11 +31,11 @@ const ValidationExample = () => {
 				</DBCard>
 
 				<DBCard>
-					<h4>With customValidity (valid)</h4>
+					<h4>With custom validation (valid)</h4>
 					<DBInfotext semantic="informational">
 						<span>
-							fixed customValidity, no auto changing of colors and
-							bad UX
+							fixed validation, no auto changing of colors and bad
+							UX
 						</span>
 					</DBInfotext>
 					<form>
@@ -45,7 +45,7 @@ const ValidationExample = () => {
 							invalidMessage="This is required"
 							validMessage="Success"
 							required
-							customValidity="valid"
+							validation="valid"
 						/>
 						<DBButton>Send</DBButton>
 					</form>
diff --git a/showcases/react-showcase/src/components/checkbox/index.tsx b/showcases/react-showcase/src/components/checkbox/index.tsx
index f0da63a3d53..601fddc84ee 100644
--- a/showcases/react-showcase/src/components/checkbox/index.tsx
+++ b/showcases/react-showcase/src/components/checkbox/index.tsx
@@ -14,7 +14,8 @@ const getCheckbox = ({
 	children,
 	disabled,
 	indeterminate,
-	variant
+	variant,
+	showLabel
 }: DBCheckboxProps) => (
 	<DBCheckbox
 		label={label}
@@ -24,6 +25,7 @@ const getCheckbox = ({
 		required={required}
 		disabled={disabled}
 		variant={variant}
+		showLabel={showLabel}
 		indeterminate={indeterminate}>
 		{children}
 	</DBCheckbox>
diff --git a/showcases/react-showcase/src/components/input/index.tsx b/showcases/react-showcase/src/components/input/index.tsx
index 4403af951a9..882749e87ac 100644
--- a/showcases/react-showcase/src/components/input/index.tsx
+++ b/showcases/react-showcase/src/components/input/index.tsx
@@ -35,7 +35,8 @@ const getInput = ({
 	message,
 	variant,
 	readOnly,
-	dataList
+	dataList,
+	showLabel
 }: DBInputProps & { dataList: boolean }) => {
 	return (
 		<DBInput
@@ -43,6 +44,7 @@ const getInput = ({
 			message={message}
 			placeholder={children}
 			variant={variant}
+			showLabel={showLabel}
 			defaultValue={value}
 			type={type}
 			minLength={minLength}
diff --git a/showcases/react-showcase/src/components/notification/index.tsx b/showcases/react-showcase/src/components/notification/index.tsx
index 564de10d943..8607652936c 100644
--- a/showcases/react-showcase/src/components/notification/index.tsx
+++ b/showcases/react-showcase/src/components/notification/index.tsx
@@ -12,7 +12,7 @@ const getNotification = ({
 	headline,
 	variant,
 	children,
-	behaviour,
+	closeable,
 	link,
 	timestamp,
 	linkVariant,
@@ -32,7 +32,7 @@ const getNotification = ({
 			) : undefined
 		}
 		variant={variant}
-		behaviour={behaviour}
+		closeable={closeable}
 		linkVariant={linkVariant}
 		timestamp={timestamp}
 		onClose={() => {
diff --git a/showcases/react-showcase/src/components/radio/index.tsx b/showcases/react-showcase/src/components/radio/index.tsx
index 78e49340efd..47b516ff9da 100644
--- a/showcases/react-showcase/src/components/radio/index.tsx
+++ b/showcases/react-showcase/src/components/radio/index.tsx
@@ -14,7 +14,7 @@ const getRadio = ({
 	children,
 	disabled,
 	value,
-	variant
+	showLabel
 }: DBRadioProps) => (
 	<DBRadio
 		label={label}
@@ -23,7 +23,7 @@ const getRadio = ({
 		defaultChecked={checked}
 		required={required}
 		disabled={disabled}
-		variant={variant}
+		showLabel={showLabel}
 		value={value}>
 		{children}
 	</DBRadio>
diff --git a/showcases/react-showcase/src/components/select/index.tsx b/showcases/react-showcase/src/components/select/index.tsx
index d8ffc1e01e7..8e2ec2c9721 100644
--- a/showcases/react-showcase/src/components/select/index.tsx
+++ b/showcases/react-showcase/src/components/select/index.tsx
@@ -15,7 +15,8 @@ const getSelect = ({
 	disabled,
 	value,
 	required,
-	variant
+	variant,
+	showLabel
 }: DBSelectProps) => {
 	const [mValue, setValue] = useState<string>(value);
 	return (
@@ -25,6 +26,7 @@ const getSelect = ({
 			options={options}
 			disabled={disabled}
 			variant={variant}
+			showLabel={showLabel}
 			icon={icon}
 			value={mValue}
 			onChange={(event) => {
diff --git a/showcases/react-showcase/src/components/switch/index.tsx b/showcases/react-showcase/src/components/switch/index.tsx
index e510180820d..d15bdc713b9 100644
--- a/showcases/react-showcase/src/components/switch/index.tsx
+++ b/showcases/react-showcase/src/components/switch/index.tsx
@@ -10,7 +10,7 @@ const getSwitch = ({
 	checked,
 	visualAid,
 	disabled,
-	variant,
+	showLabel,
 	emphasis,
 	size,
 	icon,
@@ -21,14 +21,14 @@ const getSwitch = ({
 			visualAid={visualAid}
 			defaultChecked={checked}
 			disabled={disabled}
-			variant={variant}
+			showLabel={showLabel}
 			size={size}
 			emphasis={emphasis}
 			icon={icon}
 			iconAfter={iconAfter}>
 			{children}
 		</DBSwitch>
-		{variant === 'hidden' && (
+		{showLabel !== undefined && !showLabel && (
 			<DBInfotext semantic="informational" icon="none">
 				{children}
 			</DBInfotext>
diff --git a/showcases/react-showcase/src/components/textarea/index.tsx b/showcases/react-showcase/src/components/textarea/index.tsx
index 1a1df9c940d..589939f48ee 100644
--- a/showcases/react-showcase/src/components/textarea/index.tsx
+++ b/showcases/react-showcase/src/components/textarea/index.tsx
@@ -17,13 +17,15 @@ const getTextarea = ({
 	readOnly,
 	required,
 	children,
-	variant
+	variant,
+	showLabel
 }: DBTextareaProps) => {
 	const [dynamicValue, setDynamicValue] = useState<string>(value);
 	return (
 		<DBTextarea
 			cols={cols}
 			disabled={disabled}
+			showLabel={showLabel}
 			message={message}
 			label={label}
 			variant={variant}
diff --git a/showcases/shared/checkbox.json b/showcases/shared/checkbox.json
index dbfdce4fb66..5cee28d30aa 100644
--- a/showcases/shared/checkbox.json
+++ b/showcases/shared/checkbox.json
@@ -172,7 +172,7 @@
 				"name": "No Label",
 				"props": {
 					"name": "Content",
-					"variant": "hidden"
+					"showLabel": false
 				}
 			}
 		]
diff --git a/showcases/shared/input.json b/showcases/shared/input.json
index 52975e3931f..bbf6f667158 100644
--- a/showcases/shared/input.json
+++ b/showcases/shared/input.json
@@ -46,7 +46,7 @@
 				"name": "Hidden Label",
 				"props": {
 					"label": "Label",
-					"variant": "hidden"
+					"showLabel": false
 				}
 			}
 		]
diff --git a/showcases/shared/notification.json b/showcases/shared/notification.json
index 153f001bac2..4df3214a555 100644
--- a/showcases/shared/notification.json
+++ b/showcases/shared/notification.json
@@ -9,7 +9,7 @@
 				"props": {
 					"headline": "Headline",
 					"icon": "information_circle",
-					"behaviour": "closable"
+					"closeable": true
 				}
 			},
 			{
@@ -19,7 +19,7 @@
 				"props": {
 					"headline": "Headline",
 					"icon": "information_circle",
-					"behaviour": "closable"
+					"closeable": true
 				}
 			},
 			{
@@ -29,7 +29,7 @@
 				"props": {
 					"headline": "Headline",
 					"icon": "information_circle",
-					"behaviour": "closable"
+					"closeable": true
 				}
 			}
 		]
@@ -44,7 +44,7 @@
 					"variant": "docked",
 					"headline": "Headline",
 					"icon": "information_circle",
-					"behaviour": "closable"
+					"closeable": true
 				}
 			},
 			{
@@ -54,7 +54,7 @@
 					"variant": "standalone",
 					"headline": "Headline",
 					"icon": "information_circle",
-					"behaviour": "closable"
+					"closeable": true
 				}
 			},
 			{
@@ -64,7 +64,7 @@
 					"variant": "overlay",
 					"headline": "Headline",
 					"icon": "information_circle",
-					"behaviour": "closable",
+					"closeable": true,
 					"timestamp": "10 min ago"
 				}
 			}
@@ -79,7 +79,7 @@
 				"props": {
 					"type": "alert",
 					"headline": "Headline",
-					"behaviour": "closable"
+					"closeable": true
 				}
 			},
 			{
@@ -89,7 +89,7 @@
 					"type": "alert",
 					"semantic": "neutral",
 					"headline": "Headline",
-					"behaviour": "closable"
+					"closeable": true
 				}
 			},
 			{
@@ -99,7 +99,7 @@
 					"type": "alert",
 					"semantic": "critical",
 					"headline": "Headline",
-					"behaviour": "closable"
+					"closeable": true
 				}
 			},
 			{
@@ -109,7 +109,7 @@
 					"type": "alert",
 					"semantic": "informational",
 					"headline": "Headline",
-					"behaviour": "closable"
+					"closeable": true
 				}
 			},
 			{
@@ -119,7 +119,7 @@
 					"type": "alert",
 					"semantic": "successful",
 					"headline": "Headline",
-					"behaviour": "closable"
+					"closeable": true
 				}
 			},
 			{
@@ -129,7 +129,7 @@
 					"type": "alert",
 					"semantic": "warning",
 					"headline": "Headline",
-					"behaviour": "closable"
+					"closeable": true
 				}
 			}
 		]
@@ -148,7 +148,7 @@
 				"name": "Closeable",
 				"style": { "width": "300px" },
 				"props": {
-					"behaviour": "closable"
+					"closeable": true
 				}
 			}
 		]
diff --git a/showcases/shared/radio.json b/showcases/shared/radio.json
index bd7db436984..cc2bae483fd 100644
--- a/showcases/shared/radio.json
+++ b/showcases/shared/radio.json
@@ -134,7 +134,7 @@
 				"name": "Hidden Label",
 				"props": {
 					"name": "Content",
-					"variant": "hidden"
+					"showLabel": false
 				}
 			}
 		]
diff --git a/showcases/shared/select.json b/showcases/shared/select.json
index 3bf104a7585..80b57d5c34a 100644
--- a/showcases/shared/select.json
+++ b/showcases/shared/select.json
@@ -113,7 +113,7 @@
 						}
 					],
 					"label": "Label",
-					"variant": "hidden"
+					"showLabel": false
 				}
 			}
 		]
diff --git a/showcases/shared/switch.json b/showcases/shared/switch.json
index d31a9ff33ce..821c5ad3089 100644
--- a/showcases/shared/switch.json
+++ b/showcases/shared/switch.json
@@ -124,7 +124,7 @@
 			{
 				"name": "No Label",
 				"props": {
-					"variant": "hidden"
+					"showLabel": false
 				}
 			}
 		]
diff --git a/showcases/shared/textarea.json b/showcases/shared/textarea.json
index 034a05f44c8..573c082e63e 100644
--- a/showcases/shared/textarea.json
+++ b/showcases/shared/textarea.json
@@ -46,7 +46,7 @@
 				"name": "Hidden Label",
 				"props": {
 					"label": "Label",
-					"variant": "hidden"
+					"showLabel": false
 				}
 			}
 		]
diff --git a/showcases/vue-showcase/src/components/checkbox/Checkbox.vue b/showcases/vue-showcase/src/components/checkbox/Checkbox.vue
index c347de506f2..fee4844db14 100644
--- a/showcases/vue-showcase/src/components/checkbox/Checkbox.vue
+++ b/showcases/vue-showcase/src/components/checkbox/Checkbox.vue
@@ -12,6 +12,7 @@ import { DBCheckbox } from "../../../../../output/vue/src";
 			<DBCheckbox
 				:label="exampleProps?.label"
 				:variant="exampleProps?.variant"
+				:show-label="exampleProps?.showLabel"
 				:options="exampleProps?.options"
 				:checked="exampleProps?.checked"
 				:disabled="exampleProps?.disabled"
diff --git a/showcases/vue-showcase/src/components/input/Input.vue b/showcases/vue-showcase/src/components/input/Input.vue
index 6100e46955b..60736636cae 100644
--- a/showcases/vue-showcase/src/components/input/Input.vue
+++ b/showcases/vue-showcase/src/components/input/Input.vue
@@ -2,6 +2,7 @@
 import DefaultComponent from "../DefaultComponent.vue";
 import defaultComponentVariants from "../../../../shared/input.json";
 import {
+	DBCheckbox,
 	DBInput,
 	LabelVariantType,
 	ValueLabelType
@@ -28,6 +29,7 @@ const getDataList = (
 		>
 			<DBInput
 				:variant="exampleProps?.variant"
+				:show-label="exampleProps?.showLabel"
 				:label="exampleProps?.label"
 				:message="exampleProps?.message"
 				:placeholder="exampleName"
diff --git a/showcases/vue-showcase/src/components/notification/Notification.vue b/showcases/vue-showcase/src/components/notification/Notification.vue
index 6c2399804c9..50f6ee043cc 100644
--- a/showcases/vue-showcase/src/components/notification/Notification.vue
+++ b/showcases/vue-showcase/src/components/notification/Notification.vue
@@ -24,7 +24,7 @@ const log = (exampleName: string) => {
 				:link-variant="exampleProps?.linkVariant"
 				:timestamp="exampleProps?.timestamp"
 				:icon="exampleProps?.icon"
-				:behaviour="exampleProps?.behaviour"
+				:closeable="exampleProps?.closeable"
 				@onClose="log(exampleName)"
 			>
 				<template v-if="exampleProps?.link" v-slot:link>
diff --git a/showcases/vue-showcase/src/components/radio/Radio.vue b/showcases/vue-showcase/src/components/radio/Radio.vue
index a33d1dc6b80..282833b0054 100644
--- a/showcases/vue-showcase/src/components/radio/Radio.vue
+++ b/showcases/vue-showcase/src/components/radio/Radio.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import DefaultComponent from "../DefaultComponent.vue";
 import defaultComponentVariants from "../../../../shared/radio.json";
-import { DBRadio } from "../../../../../output/vue/src";
+import { DBCheckbox, DBRadio } from "../../../../../output/vue/src";
 </script>
 
 <template>
@@ -16,7 +16,7 @@ import { DBRadio } from "../../../../../output/vue/src";
 				:checked="exampleProps?.checked"
 				:value="exampleProps?.value"
 				:required="exampleProps?.required"
-				:variant="exampleProps?.variant"
+				:show-label="exampleProps?.showLabel"
 				:disabled="exampleProps?.disabled"
 			>
 				{{ exampleName }}
diff --git a/showcases/vue-showcase/src/components/select/Select.vue b/showcases/vue-showcase/src/components/select/Select.vue
index ffdcd6a332b..f0b3ac10000 100644
--- a/showcases/vue-showcase/src/components/select/Select.vue
+++ b/showcases/vue-showcase/src/components/select/Select.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import DefaultComponent from "../DefaultComponent.vue";
 import defaultComponentVariants from "../../../../shared/select.json";
-import { DBSelect } from "../../../../../output/vue/src";
+import { DBCheckbox, DBSelect } from "../../../../../output/vue/src";
 </script>
 
 <template>
@@ -13,6 +13,7 @@ import { DBSelect } from "../../../../../output/vue/src";
 				:label="exampleProps?.label"
 				:placeholder="exampleName"
 				:variant="exampleProps?.variant"
+				:show-label="exampleProps?.showLabel"
 				:options="exampleProps?.options"
 				:disabled="exampleProps?.disabled"
 				:icon="exampleProps?.icon"
diff --git a/showcases/vue-showcase/src/components/switch/Switch.vue b/showcases/vue-showcase/src/components/switch/Switch.vue
index daf4b871f56..4aba902c3c0 100644
--- a/showcases/vue-showcase/src/components/switch/Switch.vue
+++ b/showcases/vue-showcase/src/components/switch/Switch.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import DefaultComponent from "../DefaultComponent.vue";
 import defaultComponentVariants from "../../../../shared/switch.json";
-import { DBSwitch, DBInfotext } from "../../../../../output/vue/src";
+import {
+	DBSwitch,
+	DBInfotext,
+	DBCheckbox
+} from "../../../../../output/vue/src";
 </script>
 
 <template>
@@ -13,7 +17,7 @@ import { DBSwitch, DBInfotext } from "../../../../../output/vue/src";
 				:visualAid="exampleProps?.visualAid"
 				:checked="exampleProps?.checked"
 				:disabled="exampleProps?.disabled"
-				:variant="exampleProps?.variant"
+				:show-label="exampleProps?.showLabel"
 				:size="exampleProps?.size"
 				:emphasis="exampleProps?.emphasis"
 				:icon="exampleProps?.icon"
diff --git a/showcases/vue-showcase/src/components/textarea/Textarea.vue b/showcases/vue-showcase/src/components/textarea/Textarea.vue
index 0650fde9f3c..7d1719bac75 100644
--- a/showcases/vue-showcase/src/components/textarea/Textarea.vue
+++ b/showcases/vue-showcase/src/components/textarea/Textarea.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import DefaultComponent from "../DefaultComponent.vue";
 import defaultComponentVariants from "../../../../shared/textarea.json";
-import { DBTextarea } from "../../../../../output/vue/src";
+import { DBCheckbox, DBTextarea } from "../../../../../output/vue/src";
 </script>
 
 <template>
@@ -12,6 +12,7 @@ import { DBTextarea } from "../../../../../output/vue/src";
 			<DBTextarea
 				:cols="exampleProps?.cols"
 				:disabled="exampleProps?.disabled"
+				:show-label="exampleProps?.showLabel"
 				:message="exampleProps?.message"
 				:required="exampleProps?.required"
 				:readOnly="exampleProps?.readOnly"