From 8819a5d2694b49e738c65ada6ccd93361311affe Mon Sep 17 00:00:00 2001
From: JC Estibariz <jestibariz@bluecatnetworks.com>
Date: Tue, 3 Mar 2026 12:51:18 -0500
Subject: [PATCH] feat: extract TextInput and TextArea components

---
 .../__tests__/formFields/TextArea-test.js     | 54 ++++++++++++
 .../formFields/TextAreaField-test.js          | 43 +---------
 .../__tests__/formFields/TextInput-test.js    | 67 +++++++++++++++
 .../formFields/TextInputField-test.js         | 32 +-------
 .../__snapshots__/TextArea-test.js.snap       | 51 ++++++++++++
 .../__snapshots__/TextAreaField-test.js.snap  | 82 ++++---------------
 .../__snapshots__/TextInput-test.js.snap      | 45 ++++++++++
 .../__snapshots__/TextInputField-test.js.snap | 60 ++++----------
 packages/pelagos/src/formFields/TextArea.d.ts | 26 ++++++
 packages/pelagos/src/formFields/TextArea.js   | 43 ++++++++++
 .../src/formFields/TextArea.stories.js        | 36 ++++++++
 .../pelagos/src/formFields/TextAreaField.js   | 17 ++--
 .../pelagos/src/formFields/TextInput.d.ts     | 34 ++++++++
 packages/pelagos/src/formFields/TextInput.js  | 50 +++++++++++
 .../src/formFields/TextInput.stories.js       | 44 ++++++++++
 .../pelagos/src/formFields/TextInputField.js  | 28 ++-----
 packages/pelagos/src/formFields/index.d.ts    |  2 +
 packages/pelagos/src/formFields/index.js      |  2 +
 18 files changed, 496 insertions(+), 220 deletions(-)
 create mode 100644 packages/pelagos/__tests__/formFields/TextArea-test.js
 create mode 100644 packages/pelagos/__tests__/formFields/TextInput-test.js
 create mode 100644 packages/pelagos/__tests__/formFields/__snapshots__/TextArea-test.js.snap
 create mode 100644 packages/pelagos/__tests__/formFields/__snapshots__/TextInput-test.js.snap
 create mode 100644 packages/pelagos/src/formFields/TextArea.d.ts
 create mode 100644 packages/pelagos/src/formFields/TextArea.js
 create mode 100644 packages/pelagos/src/formFields/TextArea.stories.js
 create mode 100644 packages/pelagos/src/formFields/TextInput.d.ts
 create mode 100644 packages/pelagos/src/formFields/TextInput.js
 create mode 100644 packages/pelagos/src/formFields/TextInput.stories.js

diff --git a/packages/pelagos/__tests__/formFields/TextArea-test.js b/packages/pelagos/__tests__/formFields/TextArea-test.js
new file mode 100644
index 00000000..2674c7fc
--- /dev/null
+++ b/packages/pelagos/__tests__/formFields/TextArea-test.js
@@ -0,0 +1,54 @@
+import {shallow} from 'enzyme';
+
+import TextArea from '../../src/formFields/TextArea';
+
+jest.unmock('../../src/formFields/TextArea');
+
+describe('TextArea', () => {
+	describe('rendering', () => {
+		it('renders expected elements', () => {
+			const wrapper = shallow(
+				<TextArea id="test" value="value" placeholder="placeholder" required maxLength={10} onChange={jest.fn()} />
+			);
+			expect(wrapper.getElement()).toMatchSnapshot();
+		});
+
+		it('renders expected elements when className is set', () => {
+			const wrapper = shallow(
+				<TextArea
+					id="test"
+					className="TestClass"
+					value="value"
+					placeholder="placeholder"
+					maxLength={10}
+					onChange={jest.fn()}
+				/>
+			);
+			expect(wrapper.getElement()).toMatchSnapshot();
+		});
+
+		it('renders expected elements when resize is set', () => {
+			const wrapper = shallow(
+				<TextArea id="test" value="value" placeholder="placeholder" maxLength={10} resize={true} onChange={jest.fn()} />
+			);
+			expect(wrapper.getElement()).toMatchSnapshot();
+		});
+
+		it('renders expected elements when error is set', () => {
+			const wrapper = shallow(
+				<TextArea id="test" value="value" placeholder="placeholder" maxLength={10} error onChange={jest.fn()} />
+			);
+			expect(wrapper.getElement()).toMatchSnapshot();
+		});
+	});
+
+	describe('behaviour', () => {
+		it('calls onChange when a change event is fired', () => {
+			const onChange = jest.fn();
+			const event = {target: {value: 'test'}};
+			const wrapper = shallow(<TextArea value="" onChange={onChange} />);
+			wrapper.find('[as="textarea"]').simulate('change', event);
+			expect(onChange.mock.calls).toEqual([['test']]);
+		});
+	});
+});
diff --git a/packages/pelagos/__tests__/formFields/TextAreaField-test.js b/packages/pelagos/__tests__/formFields/TextAreaField-test.js
index 84bf47e3..ae26d573 100644
--- a/packages/pelagos/__tests__/formFields/TextAreaField-test.js
+++ b/packages/pelagos/__tests__/formFields/TextAreaField-test.js
@@ -49,22 +49,7 @@ describe('TextAreaField', () => {
 			expect(wrapper.getElement()).toMatchSnapshot();
 		});
 
-		it('does not add the resize class if the resize is true', () => {
-			const wrapper = shallow(
-				<TextAreaField
-					id="test"
-					label="Label"
-					value="value"
-					placeholder="placeholder"
-					maxLength={10}
-					resize={true}
-					onChange={jest.fn()}
-				/>
-			);
-			expect(wrapper.getElement()).toMatchSnapshot();
-		});
-
-		it('renders expected elements when showCounter is true', () => {
+		it('renders expected elements when showCounter is set', () => {
 			const wrapper = shallow(
 				<TextAreaField
 					id="test"
@@ -78,31 +63,5 @@ describe('TextAreaField', () => {
 			);
 			expect(wrapper.getElement()).toMatchSnapshot();
 		});
-
-		it('adds the error class if the error is set', () => {
-			const wrapper = shallow(
-				<TextAreaField
-					id="test"
-					label="Label"
-					value="value"
-					placeholder="placeholder"
-					maxLength={10}
-					helperText="Helper text"
-					error="Error"
-					onChange={jest.fn()}
-				/>
-			);
-			expect(wrapper.getElement()).toMatchSnapshot();
-		});
-	});
-
-	describe('behaviour', () => {
-		it('calls onChange when a change event is fired', () => {
-			const onChange = jest.fn();
-			const event = {target: {value: 'test'}};
-			const wrapper = shallow(<TextAreaField label="Label" value="" onChange={onChange} />);
-			wrapper.find('[as="textarea"]').simulate('change', event);
-			expect(onChange.mock.calls).toEqual([['test']]);
-		});
 	});
 });
diff --git a/packages/pelagos/__tests__/formFields/TextInput-test.js b/packages/pelagos/__tests__/formFields/TextInput-test.js
new file mode 100644
index 00000000..3872459d
--- /dev/null
+++ b/packages/pelagos/__tests__/formFields/TextInput-test.js
@@ -0,0 +1,67 @@
+import {shallow} from 'enzyme';
+
+import TextInput from '../../src/formFields/TextInput';
+
+jest.unmock('../../src/formFields/TextInput');
+
+describe('TextInput', () => {
+	describe('rendering', () => {
+		it('renders expected elements', () => {
+			const wrapper = shallow(
+				<TextInput
+					id="test"
+					type="text"
+					name="name"
+					value="value"
+					placeholder="placeholder"
+					maxLength={10}
+					required
+					onChange={jest.fn()}
+				/>
+			);
+			expect(wrapper.getElement()).toMatchSnapshot();
+		});
+
+		it('renders expected elements when className is set', () => {
+			const wrapper = shallow(
+				<TextInput
+					id="test"
+					className="TestClass"
+					type="text"
+					name="name"
+					value="value"
+					placeholder="placeholder"
+					maxLength={10}
+					onChange={jest.fn()}
+				/>
+			);
+			expect(wrapper.getElement()).toMatchSnapshot();
+		});
+
+		it('renders expected elements when error is set', () => {
+			const wrapper = shallow(
+				<TextInput
+					id="test"
+					type="text"
+					name="name"
+					value="value"
+					placeholder="placeholder"
+					maxLength={10}
+					error
+					onChange={jest.fn()}
+				/>
+			);
+			expect(wrapper.getElement()).toMatchSnapshot();
+		});
+	});
+
+	describe('behaviour', () => {
+		it('calls onChange when a change event is fired', () => {
+			const onChange = jest.fn();
+			const event = {target: {value: 'test'}};
+			const wrapper = shallow(<TextInput onChange={onChange} />);
+			wrapper.simulate('change', event);
+			expect(onChange.mock.calls).toEqual([['test']]);
+		});
+	});
+});
diff --git a/packages/pelagos/__tests__/formFields/TextInputField-test.js b/packages/pelagos/__tests__/formFields/TextInputField-test.js
index bb545227..0963eff4 100644
--- a/packages/pelagos/__tests__/formFields/TextInputField-test.js
+++ b/packages/pelagos/__tests__/formFields/TextInputField-test.js
@@ -4,7 +4,6 @@ import TextInputField from '../../src/formFields/TextInputField';
 import useRandomId from '../../src/hooks/useRandomId';
 
 jest.unmock('../../src/formFields/TextInputField');
-jest.mock('lodash-es/debounce', () => jest.fn((f) => f));
 
 useRandomId.mockReturnValue('random-id');
 
@@ -29,23 +28,6 @@ describe('TextInputField', () => {
 			expect(useRandomId.mock.calls).toEqual([['test']]);
 		});
 
-		it('renders expected elements when value is empty', () => {
-			const wrapper = shallow(
-				<TextInputField
-					id="test"
-					label="Label"
-					type="text"
-					name="name"
-					value=""
-					placeholder="placeholder"
-					maxLength={10}
-					disabled={false}
-					onChange={jest.fn()}
-				/>
-			);
-			expect(wrapper.getElement()).toMatchSnapshot();
-		});
-
 		it('renders expected elements when className is set', () => {
 			const wrapper = shallow(
 				<TextInputField
@@ -57,14 +39,13 @@ describe('TextInputField', () => {
 					value="value"
 					placeholder="placeholder"
 					maxLength={10}
-					disabled={false}
 					onChange={jest.fn()}
 				/>
 			);
 			expect(wrapper.getElement()).toMatchSnapshot();
 		});
 
-		it('adds the error class if the error is set', () => {
+		it('renders expected elements when error is set', () => {
 			const wrapper = shallow(
 				<TextInputField
 					id="test"
@@ -74,7 +55,6 @@ describe('TextInputField', () => {
 					value="value"
 					placeholder="placeholder"
 					maxLength={10}
-					disabled={false}
 					helperText="Helper text"
 					error="Error"
 					onChange={jest.fn()}
@@ -83,14 +63,4 @@ describe('TextInputField', () => {
 			expect(wrapper.getElement()).toMatchSnapshot();
 		});
 	});
-
-	describe('behaviour', () => {
-		it('calls onChange when a change event is fired', () => {
-			const onChange = jest.fn();
-			const event = {target: {value: 'test'}};
-			const wrapper = shallow(<TextInputField label="Label" name="name" value="" onChange={onChange} />);
-			wrapper.find('[as="input"]').simulate('change', event);
-			expect(onChange.mock.calls).toEqual([['test']]);
-		});
-	});
 });
diff --git a/packages/pelagos/__tests__/formFields/__snapshots__/TextArea-test.js.snap b/packages/pelagos/__tests__/formFields/__snapshots__/TextArea-test.js.snap
new file mode 100644
index 00000000..ef3c7438
--- /dev/null
+++ b/packages/pelagos/__tests__/formFields/__snapshots__/TextArea-test.js.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`TextArea rendering renders expected elements 1`] = `
+<Layer
+  aria-required={true}
+  as="textarea"
+  className="TextAreaField__area TextAreaField--noresize"
+  id="test"
+  maxLength={10}
+  onChange={[Function]}
+  placeholder="placeholder"
+  value="value"
+/>
+`;
+
+exports[`TextArea rendering renders expected elements when className is set 1`] = `
+<Layer
+  as="textarea"
+  className="TextAreaField__area TextAreaField--noresize TestClass"
+  id="test"
+  maxLength={10}
+  onChange={[Function]}
+  placeholder="placeholder"
+  value="value"
+/>
+`;
+
+exports[`TextArea rendering renders expected elements when error is set 1`] = `
+<Layer
+  aria-invalid={true}
+  as="textarea"
+  className="TextAreaField__area TextAreaField--noresize TextAreaField--error"
+  id="test"
+  maxLength={10}
+  onChange={[Function]}
+  placeholder="placeholder"
+  value="value"
+/>
+`;
+
+exports[`TextArea rendering renders expected elements when resize is set 1`] = `
+<Layer
+  as="textarea"
+  className="TextAreaField__area"
+  id="test"
+  maxLength={10}
+  onChange={[Function]}
+  placeholder="placeholder"
+  value="value"
+/>
+`;
diff --git a/packages/pelagos/__tests__/formFields/__snapshots__/TextAreaField-test.js.snap b/packages/pelagos/__tests__/formFields/__snapshots__/TextAreaField-test.js.snap
index 85ae4e51..c4657c54 100644
--- a/packages/pelagos/__tests__/formFields/__snapshots__/TextAreaField-test.js.snap
+++ b/packages/pelagos/__tests__/formFields/__snapshots__/TextAreaField-test.js.snap
@@ -1,51 +1,5 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`TextAreaField rendering adds the error class if the error is set 1`] = `
-<FieldWrapper
-  className="TextAreaField"
-  counter={null}
-  error="Error"
-  helperId="random-id-helper"
-  helperText="Helper text"
-  htmlFor="random-id"
-  label="Label"
->
-  <Layer
-    aria-describedby="random-id-helper"
-    aria-invalid={true}
-    as="textarea"
-    className="TextAreaField__area TextAreaField--noresize TextAreaField--error"
-    id="random-id"
-    maxLength={10}
-    onChange={[Function]}
-    placeholder="placeholder"
-    value="value"
-  />
-</FieldWrapper>
-`;
-
-exports[`TextAreaField rendering does not add the resize class if the resize is true 1`] = `
-<FieldWrapper
-  className="TextAreaField"
-  counter={null}
-  helperId="random-id-helper"
-  htmlFor="random-id"
-  label="Label"
->
-  <Layer
-    aria-describedby="random-id-helper"
-    aria-invalid={false}
-    as="textarea"
-    className="TextAreaField__area"
-    id="random-id"
-    maxLength={10}
-    onChange={[Function]}
-    placeholder="placeholder"
-    value="value"
-  />
-</FieldWrapper>
-`;
-
 exports[`TextAreaField rendering renders expected elements 1`] = `
 <FieldWrapper
   className="TextAreaField"
@@ -56,16 +10,14 @@ exports[`TextAreaField rendering renders expected elements 1`] = `
   label="Label"
   required={true}
 >
-  <Layer
+  <TextAreaField
     aria-describedby="random-id-helper"
-    aria-invalid={false}
-    aria-required={true}
-    as="textarea"
-    className="TextAreaField__area TextAreaField--noresize"
+    error={false}
     id="random-id"
     maxLength={10}
-    onChange={[Function]}
+    onChange={[MockFunction]}
     placeholder="placeholder"
+    required={true}
     value="value"
   />
 </FieldWrapper>
@@ -79,21 +31,19 @@ exports[`TextAreaField rendering renders expected elements when className is set
   htmlFor="random-id"
   label="Label"
 >
-  <Layer
+  <TextAreaField
     aria-describedby="random-id-helper"
-    aria-invalid={false}
-    as="textarea"
-    className="TextAreaField__area TextAreaField--noresize"
+    error={false}
     id="random-id"
     maxLength={10}
-    onChange={[Function]}
+    onChange={[MockFunction]}
     placeholder="placeholder"
     value="value"
   />
 </FieldWrapper>
 `;
 
-exports[`TextAreaField rendering renders expected elements when showCounter is true 1`] = `
+exports[`TextAreaField rendering renders expected elements when showCounter is set 1`] = `
 <FieldWrapper
   className="TextAreaField"
   counter="5/10"
@@ -101,14 +51,12 @@ exports[`TextAreaField rendering renders expected elements when showCounter is t
   htmlFor="random-id"
   label="Label"
 >
-  <Layer
+  <TextAreaField
     aria-describedby="random-id-helper"
-    aria-invalid={false}
-    as="textarea"
-    className="TextAreaField__area TextAreaField--noresize"
+    error={false}
     id="random-id"
     maxLength={10}
-    onChange={[Function]}
+    onChange={[MockFunction]}
     placeholder="placeholder"
     value="value"
   />
@@ -123,14 +71,12 @@ exports[`TextAreaField rendering renders expected elements when value is empty 1
   htmlFor="random-id"
   label="Label"
 >
-  <Layer
+  <TextAreaField
     aria-describedby="random-id-helper"
-    aria-invalid={false}
-    as="textarea"
-    className="TextAreaField__area TextAreaField--noresize"
+    error={false}
     id="random-id"
     maxLength={10}
-    onChange={[Function]}
+    onChange={[MockFunction]}
     placeholder="placeholder"
     value=""
   />
diff --git a/packages/pelagos/__tests__/formFields/__snapshots__/TextInput-test.js.snap b/packages/pelagos/__tests__/formFields/__snapshots__/TextInput-test.js.snap
new file mode 100644
index 00000000..fc72b278
--- /dev/null
+++ b/packages/pelagos/__tests__/formFields/__snapshots__/TextInput-test.js.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`TextInput rendering renders expected elements 1`] = `
+<Layer
+  aria-required={true}
+  as="input"
+  className="TextInputField__input"
+  id="test"
+  maxLength={10}
+  name="name"
+  onChange={[Function]}
+  placeholder="placeholder"
+  type="text"
+  value="value"
+/>
+`;
+
+exports[`TextInput rendering renders expected elements when className is set 1`] = `
+<Layer
+  as="input"
+  className="TextInputField__input TestClass"
+  id="test"
+  maxLength={10}
+  name="name"
+  onChange={[Function]}
+  placeholder="placeholder"
+  type="text"
+  value="value"
+/>
+`;
+
+exports[`TextInput rendering renders expected elements when error is set 1`] = `
+<Layer
+  aria-invalid={true}
+  as="input"
+  className="TextInputField__input TextInputField--error"
+  id="test"
+  maxLength={10}
+  name="name"
+  onChange={[Function]}
+  placeholder="placeholder"
+  type="text"
+  value="value"
+/>
+`;
diff --git a/packages/pelagos/__tests__/formFields/__snapshots__/TextInputField-test.js.snap b/packages/pelagos/__tests__/formFields/__snapshots__/TextInputField-test.js.snap
index 2f861038..ef6dc17b 100644
--- a/packages/pelagos/__tests__/formFields/__snapshots__/TextInputField-test.js.snap
+++ b/packages/pelagos/__tests__/formFields/__snapshots__/TextInputField-test.js.snap
@@ -1,31 +1,5 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`TextInputField rendering adds the error class if the error is set 1`] = `
-<FieldWrapper
-  className="TextInputField"
-  error="Error"
-  helperId="random-id-helper"
-  helperText="Helper text"
-  htmlFor="random-id"
-  label="Label"
->
-  <Layer
-    aria-describedby="random-id-helper"
-    aria-invalid={true}
-    as="input"
-    className="TextInputField__input TextInputField--error"
-    disabled={false}
-    id="random-id"
-    maxLength={10}
-    name="name"
-    onChange={[Function]}
-    placeholder="placeholder"
-    type="text"
-    value="value"
-  />
-</FieldWrapper>
-`;
-
 exports[`TextInputField rendering renders expected elements 1`] = `
 <FieldWrapper
   className="TextInputField"
@@ -35,17 +9,15 @@ exports[`TextInputField rendering renders expected elements 1`] = `
   label="Label"
   required={true}
 >
-  <Layer
+  <TextInputField
     aria-describedby="random-id-helper"
-    aria-invalid={false}
-    aria-required={true}
-    as="input"
-    className="TextInputField__input"
+    error={false}
     id="random-id"
     maxLength={10}
     name="name"
-    onChange={[Function]}
+    onChange={[MockFunction]}
     placeholder="placeholder"
+    required={true}
     type="text"
     value="value"
   />
@@ -59,16 +31,13 @@ exports[`TextInputField rendering renders expected elements when className is se
   htmlFor="random-id"
   label="Label"
 >
-  <Layer
+  <TextInputField
     aria-describedby="random-id-helper"
-    aria-invalid={false}
-    as="input"
-    className="TextInputField__input"
-    disabled={false}
+    error={false}
     id="random-id"
     maxLength={10}
     name="name"
-    onChange={[Function]}
+    onChange={[MockFunction]}
     placeholder="placeholder"
     type="text"
     value="value"
@@ -76,26 +45,25 @@ exports[`TextInputField rendering renders expected elements when className is se
 </FieldWrapper>
 `;
 
-exports[`TextInputField rendering renders expected elements when value is empty 1`] = `
+exports[`TextInputField rendering renders expected elements when error is set 1`] = `
 <FieldWrapper
   className="TextInputField"
+  error="Error"
   helperId="random-id-helper"
+  helperText="Helper text"
   htmlFor="random-id"
   label="Label"
 >
-  <Layer
+  <TextInputField
     aria-describedby="random-id-helper"
-    aria-invalid={false}
-    as="input"
-    className="TextInputField__input"
-    disabled={false}
+    error={true}
     id="random-id"
     maxLength={10}
     name="name"
-    onChange={[Function]}
+    onChange={[MockFunction]}
     placeholder="placeholder"
     type="text"
-    value=""
+    value="value"
   />
 </FieldWrapper>
 `;
diff --git a/packages/pelagos/src/formFields/TextArea.d.ts b/packages/pelagos/src/formFields/TextArea.d.ts
new file mode 100644
index 00000000..e6ab7581
--- /dev/null
+++ b/packages/pelagos/src/formFields/TextArea.d.ts
@@ -0,0 +1,26 @@
+import type {FunctionComponent, HTMLProps} from 'react';
+
+interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'value' | 'onChange'> {
+	/** The component ID. */
+	id?: string;
+	/** The component class name(s). */
+	className?: string;
+	/** The field value. */
+	value?: string;
+	/** The placeholder text. */
+	placeholder?: string;
+	/** Whether the field is required. */
+	required?: boolean;
+	/** Whether the field can be resized. */
+	resize?: boolean;
+	/** The maximum text length. */
+	maxLength?: number;
+	/** Whether the component is in error. */
+	error?: boolean;
+	/** Function invoked when the value changes. */
+	onChange: (value: string) => void;
+}
+
+/** A text area input. */
+declare const TextArea: FunctionComponent<TextAreaProps>;
+export default TextArea;
diff --git a/packages/pelagos/src/formFields/TextArea.js b/packages/pelagos/src/formFields/TextArea.js
new file mode 100644
index 00000000..d5395fb1
--- /dev/null
+++ b/packages/pelagos/src/formFields/TextArea.js
@@ -0,0 +1,43 @@
+import {useCallback} from 'react';
+import PropTypes from 'prop-types';
+
+import Layer from '../components/Layer';
+
+import './TextAreaField.less';
+
+/** A text area input. */
+const TextAreaField = ({className, required, resize, error, onChange, ...props}) => (
+	<Layer
+		{...props}
+		as="textarea"
+		className={`TextAreaField__area${resize ? '' : ' TextAreaField--noresize'}${
+			error ? ' TextAreaField--error' : ''
+		}${className ? ` ${className}` : ''}`}
+		aria-required={required}
+		aria-invalid={error}
+		onChange={useCallback((event) => onChange(event.target.value), [onChange])}
+	/>
+);
+
+TextAreaField.propTypes = {
+	/** The component ID. */
+	id: PropTypes.string,
+	/** The component class name(s). */
+	className: PropTypes.string,
+	/** The field value. */
+	value: PropTypes.string,
+	/** The placeholder text. */
+	placeholder: PropTypes.string,
+	/** Whether the field is required. */
+	required: PropTypes.bool,
+	/** Whether the field can be resized. */
+	resize: PropTypes.bool,
+	/** The maximum text length. */
+	maxLength: PropTypes.number,
+	/** Whether the component is in error. */
+	error: PropTypes.bool,
+	/** Function invoked when the value changes. */
+	onChange: PropTypes.func.isRequired,
+};
+
+export default TextAreaField;
diff --git a/packages/pelagos/src/formFields/TextArea.stories.js b/packages/pelagos/src/formFields/TextArea.stories.js
new file mode 100644
index 00000000..46c5dc9b
--- /dev/null
+++ b/packages/pelagos/src/formFields/TextArea.stories.js
@@ -0,0 +1,36 @@
+import {useState} from 'react';
+import {action} from 'storybook/actions';
+
+import WithLayers from '../../templates/WithLayers';
+
+import TextArea from './TextArea';
+
+const handleChange = action('onChange');
+
+export default {
+	title: 'Components/TextArea',
+	component: TextArea,
+	render: (args) => {
+		const [value, setValue] = useState(args.value);
+		return <TextArea {...args} value={value} onChange={setValue} />;
+	},
+};
+
+export const Default = {
+	args: {'aria-label': 'Default', value: 'Alpha'},
+};
+
+export const Empty = {
+	args: {'aria-label': 'Empty', placeholder: 'Placeholder'},
+};
+
+export const Error = {
+	args: {'aria-label': 'Error', value: 'Alpha', error: true},
+};
+
+export const _WithLayers = {
+	render: () => <WithLayers>{() => <TextArea aria-label="Label" value="Alpha" onChange={handleChange} />}</WithLayers>,
+	parameters: {
+		controls: {hideNoControlsWarning: true},
+	},
+};
diff --git a/packages/pelagos/src/formFields/TextAreaField.js b/packages/pelagos/src/formFields/TextAreaField.js
index 3f6b1dd2..85d3d650 100644
--- a/packages/pelagos/src/formFields/TextAreaField.js
+++ b/packages/pelagos/src/formFields/TextAreaField.js
@@ -1,10 +1,10 @@
-import {useCallback} from 'react';
 import PropTypes from 'prop-types';
 
-import Layer from '../components/Layer';
 import useRandomId from '../hooks/useRandomId';
 
 import FieldWrapper from './FieldWrapper';
+import TextArea from './TextArea';
+
 import './TextAreaField.less';
 
 /** A text area form field. */
@@ -14,7 +14,6 @@ const TextAreaField = ({
 	label,
 	value,
 	required,
-	resize,
 	maxLength,
 	showCounter,
 	helperText,
@@ -34,19 +33,15 @@ const TextAreaField = ({
 			helperId={helperId}
 			helperText={helperText}
 			error={error}>
-			<Layer
+			<TextArea
 				{...props}
-				as="textarea"
 				id={id}
-				className={`TextAreaField__area${resize ? '' : ' TextAreaField--noresize'}${
-					error ? ' TextAreaField--error' : ''
-				}`}
 				value={value}
 				maxLength={maxLength}
+				required={required}
+				error={!!error}
 				aria-describedby={helperId}
-				aria-required={required}
-				aria-invalid={!!error}
-				onChange={useCallback((event) => onChange(event.target.value), [onChange])}
+				onChange={onChange}
 			/>
 		</FieldWrapper>
 	);
diff --git a/packages/pelagos/src/formFields/TextInput.d.ts b/packages/pelagos/src/formFields/TextInput.d.ts
new file mode 100644
index 00000000..eb9f21ca
--- /dev/null
+++ b/packages/pelagos/src/formFields/TextInput.d.ts
@@ -0,0 +1,34 @@
+import type {FunctionComponent, HTMLProps} from 'react';
+
+interface TextInputProps extends Omit<HTMLProps<HTMLInputElement>, 'value' | 'onChange'> {
+	/** The component ID. */
+	id?: string;
+	/** The component class name(s). */
+	className?: string;
+	/** The input type. */
+	type?: string;
+	/** The input name. */
+	name?: string;
+	/** The auto-complete option. */
+	autoComplete?: string;
+	/** The field value. */
+	value?: number | string | null;
+	/** The placeholder text. */
+	placeholder?: string;
+	/** The maximum text length. */
+	maxLength?: number;
+	/** Whether the field focused on display. */
+	autoFocus?: boolean;
+	/** Whether the field is disabled. */
+	disabled?: boolean;
+	/** Whether the field is required. */
+	required?: boolean;
+	/** Whether the component is in error. */
+	error?: boolean;
+	/** Function invoked when the value changes. */
+	onChange: (value: string) => void;
+}
+
+/** A text input. */
+declare const TextInput: FunctionComponent<TextInputProps>;
+export default TextInput;
diff --git a/packages/pelagos/src/formFields/TextInput.js b/packages/pelagos/src/formFields/TextInput.js
new file mode 100644
index 00000000..c4c5d623
--- /dev/null
+++ b/packages/pelagos/src/formFields/TextInput.js
@@ -0,0 +1,50 @@
+import {useCallback} from 'react';
+import PropTypes from 'prop-types';
+
+import Layer from '../components/Layer';
+
+import './TextInputField.less';
+
+/** A text input. */
+const TextInputField = ({className, type = 'text', required, error, onChange, ...props}) => (
+	<Layer
+		{...props}
+		as="input"
+		className={`TextInputField__input${error ? ' TextInputField--error' : ''}${className ? ` ${className}` : ''}`}
+		type={type}
+		aria-required={required}
+		aria-invalid={error}
+		onChange={useCallback((event) => onChange(event.target.value), [onChange])}
+	/>
+);
+
+TextInputField.propTypes = {
+	/** The component ID. */
+	id: PropTypes.string,
+	/** The component class name(s). */
+	className: PropTypes.string,
+	/** The input type. */
+	type: PropTypes.string,
+	/** The input name. */
+	name: PropTypes.string,
+	/** The auto-complete option. */
+	autoComplete: PropTypes.string,
+	/** The field value. */
+	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/** The placeholder text. */
+	placeholder: PropTypes.string,
+	/** The maximum text length. */
+	maxLength: PropTypes.number,
+	/** Whether the field focused on display. */
+	autoFocus: PropTypes.bool,
+	/** Whether the field is disabled. */
+	disabled: PropTypes.bool,
+	/** Whether the field is required. */
+	required: PropTypes.bool,
+	/** Whether the component is in error. */
+	error: PropTypes.bool,
+	/** Function invoked when the value changes. */
+	onChange: PropTypes.func.isRequired,
+};
+
+export default TextInputField;
diff --git a/packages/pelagos/src/formFields/TextInput.stories.js b/packages/pelagos/src/formFields/TextInput.stories.js
new file mode 100644
index 00000000..a2c13f46
--- /dev/null
+++ b/packages/pelagos/src/formFields/TextInput.stories.js
@@ -0,0 +1,44 @@
+import {useState} from 'react';
+import {action} from 'storybook/actions';
+
+import WithLayers from '../../templates/WithLayers';
+
+import TextInput from './TextInput';
+
+const handleChange = action('onChange');
+
+export default {
+	title: 'Components/TextInput',
+	component: TextInput,
+	render: (args) => {
+		const [value, setValue] = useState(args.value);
+		return <TextInput {...args} value={value} onChange={setValue} />;
+	},
+};
+
+export const Default = {
+	args: {'aria-label': 'Default', value: 'Alpha'},
+};
+
+export const Empty = {
+	args: {'aria-label': 'Empty', placeholder: 'Placeholder'},
+};
+
+export const Disabled = {
+	args: {'aria-label': 'Disabled', value: 'Alpha', disabled: true},
+};
+
+export const ReadOnly = {
+	args: {'aria-label': 'Read-Only', value: 'Alpha', readOnly: true},
+};
+
+export const Error = {
+	args: {'aria-label': 'Error', value: 'Alpha', required: true, error: true},
+};
+
+export const _WithLayers = {
+	render: () => <WithLayers>{() => <TextInput aria-label="Label" value="Alpha" onChange={handleChange} />}</WithLayers>,
+	parameters: {
+		controls: {hideNoControlsWarning: true},
+	},
+};
diff --git a/packages/pelagos/src/formFields/TextInputField.js b/packages/pelagos/src/formFields/TextInputField.js
index 401acabc..5c6c7367 100644
--- a/packages/pelagos/src/formFields/TextInputField.js
+++ b/packages/pelagos/src/formFields/TextInputField.js
@@ -1,26 +1,14 @@
-import {useCallback} from 'react';
 import PropTypes from 'prop-types';
 
-import Layer from '../components/Layer';
 import useRandomId from '../hooks/useRandomId';
 
 import FieldWrapper from './FieldWrapper';
+import TextInput from './TextInput';
 
 import './TextInputField.less';
 
 /** A text input form field. */
-const TextInputField = ({
-	id,
-	className,
-	label,
-	type = 'text',
-	value,
-	required,
-	helperText,
-	error,
-	onChange,
-	...props
-}) => {
+const TextInputField = ({id, className, label, required, helperText, error, onChange, ...props}) => {
 	id = useRandomId(id);
 	const helperId = `${id}-helper`;
 	return (
@@ -32,17 +20,13 @@ const TextInputField = ({
 			helperId={helperId}
 			helperText={helperText}
 			error={error}>
-			<Layer
+			<TextInput
 				{...props}
-				as="input"
 				id={id}
-				className={`TextInputField__input${error ? ' TextInputField--error' : ''}`}
-				type={type}
-				value={value}
+				required={required}
+				error={!!error}
 				aria-describedby={helperId}
-				aria-required={required}
-				aria-invalid={!!error}
-				onChange={useCallback((event) => onChange(event.target.value), [onChange])}
+				onChange={onChange}
 			/>
 		</FieldWrapper>
 	);
diff --git a/packages/pelagos/src/formFields/index.d.ts b/packages/pelagos/src/formFields/index.d.ts
index e74adc18..d38a122b 100644
--- a/packages/pelagos/src/formFields/index.d.ts
+++ b/packages/pelagos/src/formFields/index.d.ts
@@ -5,6 +5,8 @@ export {default as FieldHelper} from './FieldHelper';
 export {default as FieldWrapper} from './FieldWrapper';
 export {default as OutputField} from './OutputField';
 export {default as TagInputField} from './TagInputField';
+export {default as TextArea} from './TextArea';
 export {default as TextAreaField} from './TextAreaField';
+export {default as TextInput} from './TextInput';
 export {default as TextInputField} from './TextInputField';
 export {default as ToggleField} from './ToggleField';
diff --git a/packages/pelagos/src/formFields/index.js b/packages/pelagos/src/formFields/index.js
index e74adc18..d38a122b 100644
--- a/packages/pelagos/src/formFields/index.js
+++ b/packages/pelagos/src/formFields/index.js
@@ -5,6 +5,8 @@ export {default as FieldHelper} from './FieldHelper';
 export {default as FieldWrapper} from './FieldWrapper';
 export {default as OutputField} from './OutputField';
 export {default as TagInputField} from './TagInputField';
+export {default as TextArea} from './TextArea';
 export {default as TextAreaField} from './TextAreaField';
+export {default as TextInput} from './TextInput';
 export {default as TextInputField} from './TextInputField';
 export {default as ToggleField} from './ToggleField';