DataForm: Add a textarea control available for use with the text field type

packages/components/CHANGELOG.md

@@ -9,6 +9,7 @@
 ### Internal
 
 -   `ValidatedCheckboxControl`: Expose the component under private API's ([#71505](https://github.com/WordPress/gutenberg/pull/71505/)).
+-   Expose `ValidatedTextareaControl` via Private APIs ([#71495](https://github.com/WordPress/gutenberg/pull/71495))
 
 ## 30.3.0 (2025-09-03)
 

packages/components/src/private-apis.ts

@@ -17,6 +17,7 @@ import {
 	ValidatedInputControl,
 	ValidatedNumberControl,
 	ValidatedTextControl,
+	ValidatedTextareaControl,
 	ValidatedToggleControl,
 } from './validated-form-controls';
 import { Picker } from './color-picker/picker';
@@ -40,5 +41,6 @@ lock( privateApis, {
 	ValidatedCheckboxControl,
 	ValidatedNumberControl,
 	ValidatedTextControl,
+	ValidatedTextareaControl,
 	ValidatedToggleControl,
 } );

packages/dataviews/CHANGELOG.md

@@ -13,6 +13,7 @@
 - DataForm: introduce a new `row` layout, check the README for details. [#71124](https://github.com/WordPress/gutenberg/pull/71124)
 - Dataform: Add new `url` field type and field control. [#71518](https://github.com/WordPress/gutenberg/pull/71518)
 - Dataform: Add new `password` field type and field control. [#71545](https://github.com/WordPress/gutenberg/pull/71545)
+- DataForm: Add a textarea control for use with the `text` field type ([#71495](https://github.com/WordPress/gutenberg/pull/71495))
 
 ### Bug Fixes
 

packages/dataviews/src/components/dataform/stories/index.story.tsx

@@ -168,6 +168,12 @@ const fields: Field< SamplePost >[] = [
 		label: 'City',
 		type: 'text',
 	},
+	{
+		id: 'description',
+		label: 'Description',
+		type: 'text',
+		Edit: 'textarea',
+	},
 ];
 
 const LayoutRegularComponent = ( {
@@ -189,6 +195,7 @@ const LayoutRegularComponent = ( {
 		filesize: 1024,
 		dimensions: '1920x1080',
 		tags: [ 'photography' ],
+		description: 'This is a sample description.',
 	} );
 
 	const form: Form = useMemo(
@@ -212,6 +219,7 @@ const LayoutRegularComponent = ( {
 				'filesize',
 				'dimensions',
 				'tags',
+				'description',
 			],
 		} ),
 		[ labelPosition ]
@@ -388,6 +396,7 @@ const ValidationComponent = ( {
 } ) => {
 	type ValidatedItem = {
 		text: string;
+		textarea: string;
 		email: string;
 		telephone: string;
 		url: string;
@@ -400,6 +409,7 @@ const ValidationComponent = ( {
 
 	const [ post, setPost ] = useState< ValidatedItem >( {
 		text: 'Can have letters and spaces',
+		textarea: 'Can have letters and spaces',
 		email: 'hi@example.com',
 		telephone: '+306978241796',
 		url: 'https://example.com',
@@ -417,6 +427,13 @@ const ValidationComponent = ( {
 
 		return null;
 	};
+	const customTextareaRule = ( value: ValidatedItem ) => {
+		if ( ! /^[a-zA-Z ]+$/.test( value.textarea ) ) {
+			return 'Value must only contain letters and spaces.';
+		}
+
+		return null;
+	};
 	const customEmailRule = ( value: ValidatedItem ) => {
 		if ( ! /^[a-zA-Z0-9._%+-]+@example\.com$/.test( value.email ) ) {
 			return 'Email address must be from @example.com domain.';
@@ -483,6 +500,16 @@ const ValidationComponent = ( {
 				custom: maybeCustomRule( customTextRule ),
 			},
 		},
+		{
+			id: 'textarea',
+			type: 'text',
+			Edit: 'textarea',
+			label: 'Textarea',
+			isValid: {
+				required,
+				custom: maybeCustomRule( customTextareaRule ),
+			},
+		},
 		{
 			id: 'email',
 			type: 'email',
@@ -559,6 +586,7 @@ const ValidationComponent = ( {
 		layout: { type },
 		fields: [
 			'text',
+			'textarea',
 			'email',
 			'telephone',
 			'url',

packages/dataviews/src/dataform-controls/index.tsx

@@ -22,6 +22,7 @@ import radio from './radio';
 import select from './select';
 import text from './text';
 import toggle from './toggle';
+import textarea from './textarea';
 import toggleGroup from './toggle-group';
 import array from './array';
 import color from './color';
@@ -46,6 +47,7 @@ const FORM_CONTROLS: FormControls = {
 	select,
 	text,
 	toggle,
+	textarea,
 	toggleGroup,
 };
 

packages/dataviews/src/dataform-controls/textarea.tsx

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis } from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedTextareaControl } = unlock( privateApis );
+
+export default function Textarea< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, placeholder, description } = field;
+	const value = field.getValue( { item: data } );
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedTextareaControl
+			>[ 'customValidity' ]
+		>( undefined );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<ValidatedTextareaControl
+			required={ !! field.isValid?.required }
+			onValidate={ ( newValue: any ) => {
+				const message = field.isValid?.custom?.(
+					{
+						...data,
+						[ id ]: newValue,
+					},
+					field
+				);
+
+				if ( message ) {
+					setCustomValidity( {
+						type: 'invalid',
+						message,
+					} );
+					return;
+				}
+
+				setCustomValidity( undefined );
+			} }
+			customValidity={ customValidity }
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			help={ description }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}

packages/dataviews/src/dataforms-layouts/regular/index.tsx

@@ -84,6 +84,7 @@ export default function FormRegularField< Item >( {
 	if ( ! fieldDefinition || ! fieldDefinition.Edit ) {
 		return null;
 	}
+
 	if ( labelPosition === 'side' ) {
 		return (
 			<HStack className="dataforms-layouts-regular__field">

packages/dataviews/src/field-types/stories/index.story.tsx

@@ -60,6 +60,7 @@ type DataType = {
 	id: number;
 	text: string;
 	textWithElements: string;
+	textWithTextarea: string;
 	integer: number;
 	integerWithElements: number;
 	boolean: boolean;
@@ -92,6 +93,7 @@ const data: DataType[] = [
 		id: 1,
 		text: 'Text',
 		textWithElements: 'Item 1',
+		textWithTextarea: 'Textarea',
 		integer: 1,
 		integerWithElements: 1,
 		boolean: true,
@@ -139,6 +141,13 @@ const fields: Field< DataType >[] = [
 			{ value: 'item3', label: 'Item 3' },
 		],
 	},
+	{
+		id: 'textWithTextarea',
+		type: 'text',
+		label: 'Textarea',
+		description: 'Help for textarea.',
+		Edit: 'textarea',
+	},
 	{
 		id: 'integer',
 		type: 'integer',