diff --git a/packages/block-library/src/form-input/edit.js b/packages/block-library/src/form-input/edit.js
index e015a956ddd46c..78bc36ba10e99a 100644
--- a/packages/block-library/src/form-input/edit.js
+++ b/packages/block-library/src/form-input/edit.js
@@ -115,6 +115,20 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 						'Affects the "name" attribute of the input element, and is used as a name for the form submission results.'
 					) }
 				/>
+				{ 'hidden' === type && (
+					<TextControl
+						__next40pxDefaultSize
+						autoComplete="off"
+						label={ __( 'Value' ) }
+						value={ value }
+						onChange={ ( newVal ) =>
+							setAttributes( { value: newVal } )
+						}
+						help={ __(
+							'Sets the stored value for this hidden field.'
+						) }
+					/>
+				) }
 			</InspectorControls>
 		</>
 	);
@@ -133,23 +147,13 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 
 	if ( 'hidden' === type ) {
 		return (
-			<>
+			<div { ...blockProps }>
 				{ controls }
-				<input
-					type="hidden"
-					className={ clsx(
-						className,
-						'wp-block-form-input__input',
-						colorProps.className,
-						borderProps.className
-					) }
-					aria-label={ __( 'Value' ) }
-					value={ value }
-					onChange={ ( event ) =>
-						setAttributes( { value: event.target.value } )
-					}
+				<span
+					className="wp-block-form-input__label is-input-hidden"
+					data-message={ __( 'Hidden field' ) }
 				/>
-			</>
+			</div>
 		);
 	}
 
diff --git a/packages/block-library/src/form-input/editor.scss b/packages/block-library/src/form-input/editor.scss
index 2ac67e6615ed4a..8f2c99a0d29368 100644
--- a/packages/block-library/src/form-input/editor.scss
+++ b/packages/block-library/src/form-input/editor.scss
@@ -1,24 +1,24 @@
 .wp-block-form-input {
 	.is-input-hidden {
+		display: flex;
+		position: relative;
 		font-size: 0.85em;
 		opacity: 0.3;
 		border: 1px dashed;
 		padding: 0.5em;
 		box-sizing: border-box;
 		background: repeating-linear-gradient(45deg, transparent, transparent 5px, currentColor 5px, currentColor 6px);
+		justify-content: center;
+		align-items: center;
 
-		input[type="text"] {
-			background: transparent;
+		&::after {
+			content: attr(data-message);
 		}
 	}
 	&.is-selected {
 		.is-input-hidden {
 			opacity: 1;
 			background: none;
-
-			input[type="text"] {
-				background: unset;
-			}
 		}
 	}
 }
diff --git a/packages/block-library/src/form-input/variations.js b/packages/block-library/src/form-input/variations.js
index 322043d5e27012..cd6e4d43fec527 100644
--- a/packages/block-library/src/form-input/variations.js
+++ b/packages/block-library/src/form-input/variations.js
@@ -77,6 +77,16 @@ const variations = [
 		scope: [ 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) => blockAttributes?.type === 'number',
 	},
+	{
+		name: 'hidden',
+		title: __( 'Hidden Input' ),
+		icon: 'visibility',
+		description: __( 'A hidden input field.' ),
+		attributes: { type: 'hidden' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'hidden',
+	},
 ];
 
 export default variations;