feat(textarea): 718 - Add Textarea component

docs/reference/generated/textarea.json

@@ -0,0 +1,58 @@
+{
+  "name": "Textarea",
+  "description": "A native textarea element that automatically works with [Field](https://base-ui.com/react/components/field).\nRenders an `<textarea>` element.",
+  "props": {
+    "defaultValue": {
+      "type": "string | number | string[]",
+      "detailedType": "string | number | string[] | undefined"
+    },
+    "onValueChange": {
+      "type": "((value: string, eventDetails: Textarea.ChangeEventDetails) => void)",
+      "description": "Callback fired when the `value` changes. Use when controlled.",
+      "detailedType": "| ((\n    value: string,\n    eventDetails: Textarea.ChangeEventDetails,\n  ) => void)\n| undefined"
+    },
+    "maxRows": {
+      "type": "number",
+      "description": "Limit automatic height resizing to this many rows.",
+      "detailedType": "number | undefined"
+    },
+    "minRows": {
+      "type": "number",
+      "description": "Enable automatic height resizing by setting the minimum number of rows.\n\nPrefer the CSS property `field-sizing: content` when supported (not\nsupported in Safari and Firefox).",
+      "detailedType": "number | undefined"
+    },
+    "className": {
+      "type": "string | ((state: Field.Root.State) => string)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: Field.Root.State) => ReactElement)",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Field.Root.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {
+    "data-disabled": {
+      "description": "Present when the textarea is disabled."
+    },
+    "data-valid": {
+      "description": "Present when the textarea is in valid state."
+    },
+    "data-invalid": {
+      "description": "Present when the textarea is in invalid state."
+    },
+    "data-dirty": {
+      "description": "Present when the textarea's value has changed."
+    },
+    "data-touched": {
+      "description": "Present when the textarea has been touched."
+    },
+    "data-filled": {
+      "description": "Present when the textarea is filled."
+    },
+    "data-focused": {
+      "description": "Present when the textarea is focused."
+    }
+  },
+  "cssVariables": {}
+}

docs/src/app/(public)/(content)/react/components/textarea/demos/form/css-modules/index.module.css

@@ -0,0 +1,92 @@
+.Form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  max-width: 16rem;
+}
+
+.Field {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.25rem;
+}
+
+.Label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  color: var(--color-gray-900);
+}
+
+.Textarea {
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid var(--color-gray-200);
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  max-width: 16rem;
+  min-height: 4rem;
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: normal;
+  background-color: transparent;
+  color: var(--color-gray-900);
+  field-sizing: content;
+  resize: vertical;
+
+  &:focus {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
+
+.Error {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--color-red-800);
+}
+
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  margin: 0;
+  outline: 0;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  color: var(--color-gray-900);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--color-gray-400);
+    background-color: var(--color-gray-100);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}

docs/src/app/(public)/(content)/react/components/textarea/demos/form/css-modules/index.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Field } from '@base-ui-components/react/field';
+import { Form } from '@base-ui-components/react/form';
+import { Textarea } from '@base-ui-components/react/textarea';
+import styles from './index.module.css';
+
+export default function ExampleForm() {
+  const [errors, setErrors] = React.useState({});
+  const [loading, setLoading] = React.useState(false);
+
+  return (
+    <Form
+      className={styles.Form}
+      errors={errors}
+      onClearErrors={setErrors}
+      onSubmit={async (event) => {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+        const value = formData.get('feedback') as string;
+
+        setLoading(true);
+        const response = await submitForm(value);
+        const serverErrors = {
+          feedback: response.error,
+        };
+
+        setErrors(serverErrors);
+        setLoading(false);
+      }}
+    >
+      <Field.Root name="feedback" className={styles.Field}>
+        <Field.Label className={styles.Label}>Feedback</Field.Label>
+        <Textarea placeholder="Enter your feedback" className={styles.Textarea} />
+        <Field.Error className={styles.Error} />
+      </Field.Root>
+      <button disabled={loading} type="submit" className={styles.Button}>
+        Submit
+      </button>
+    </Form>
+  );
+}
+
+async function submitForm(value: string) {
+  // Mimic a server response
+  await new Promise((resolve) => {
+    setTimeout(resolve, 1000);
+  });
+
+  try {
+    if (value.length < 10) {
+      return { error: 'Feedback must be at least 10 characters long' };
+    }
+  } catch {
+    return { error: 'Invalid feedback' };
+  }
+
+  return { success: true };
+}

docs/src/app/(public)/(content)/react/components/textarea/demos/form/index.ts

@@ -0,0 +1,3 @@
+'use client';
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';

docs/src/app/(public)/(content)/react/components/textarea/demos/form/tailwind/index.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Field } from '@base-ui-components/react/field';
+import { Form } from '@base-ui-components/react/form';
+import { Textarea } from '@base-ui-components/react/textarea';
+
+export default function ExampleForm() {
+  const [errors, setErrors] = React.useState({});
+  const [loading, setLoading] = React.useState(false);
+
+  return (
+    <Form
+      className="flex w-full max-w-64 flex-col gap-4"
+      errors={errors}
+      onClearErrors={setErrors}
+      onSubmit={async (event) => {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+        const value = formData.get('feedback') as string;
+
+        setLoading(true);
+        const response = await submitForm(value);
+        const serverErrors = {
+          feedback: response.error,
+        };
+
+        setErrors(serverErrors);
+        setLoading(false);
+      }}
+    >
+      <Field.Root name="feedback" className="flex flex-col items-start gap-1">
+        <Field.Label className="text-sm font-medium text-gray-900">Feedback</Field.Label>
+        <Textarea
+          placeholder="Enter your feedback"
+          className="field-sizing-content min-h-16 w-full max-w-64 resize-y rounded-md border border-gray-200 px-3 py-2 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+        />
+        <Field.Error className="text-sm text-red-800" />
+      </Field.Root>
+      <button
+        disabled={loading}
+        type="submit"
+        className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400"
+      >
+        Submit
+      </button>
+    </Form>
+  );
+}
+
+async function submitForm(value: string) {
+  // Mimic a server response
+  await new Promise((resolve) => {
+    setTimeout(resolve, 1000);
+  });
+
+  try {
+    if (value.length < 10) {
+      return { error: 'Feedback must be at least 10 characters long' };
+    }
+  } catch {
+    return { error: 'Invalid feedback' };
+  }
+
+  return { success: true };
+}

docs/src/app/(public)/(content)/react/components/textarea/demos/hero/css-modules/index.module.css

@@ -0,0 +1,23 @@
+.Textarea {
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid var(--color-gray-200);
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  max-width: 16rem;
+  min-height: 4rem;
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: normal;
+  background-color: transparent;
+  color: var(--color-gray-900);
+  field-sizing: content;
+  resize: vertical;
+
+  &:focus {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}

docs/src/app/(public)/(content)/react/components/textarea/demos/hero/css-modules/index.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Textarea } from '@base-ui-components/react/textarea';
+import styles from './index.module.css';
+
+export default function ExampleTextarea() {
+  return <Textarea placeholder="Type something…" className={styles.Textarea} />;
+}

docs/src/app/(public)/(content)/react/components/textarea/demos/hero/index.ts

@@ -0,0 +1,3 @@
+'use client';
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';

docs/src/app/(public)/(content)/react/components/textarea/demos/hero/tailwind/index.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Textarea } from '@base-ui-components/react/textarea';
+
+export default function ExampleTextarea() {
+  return (
+    <Textarea
+      placeholder="Type something…"
+      className="field-sizing-content min-h-16 w-full max-w-64 resize-y rounded-md border border-gray-200 px-3 py-2 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+    />
+  );
+}

docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/css-modules/index.module.css

@@ -0,0 +1,23 @@
+.Textarea {
+  box-sizing: border-box;
+  margin: 0;
+  border: 1px solid var(--color-gray-200);
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  max-width: 16rem;
+  min-height: 4rem;
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: normal;
+  background-color: transparent;
+  color: var(--color-gray-900);
+  field-sizing: content;
+  resize: vertical;
+
+  &:focus {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}

docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/css-modules/index.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Textarea } from '@base-ui-components/react/textarea';
+import styles from './index.module.css';
+
+export default function ExampleTextarea() {
+  return <Textarea placeholder="Type something…" minRows={4} className={styles.Textarea} />;
+}

docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/index.ts

@@ -0,0 +1,3 @@
+'use client';
+export { default as CssModules } from './css-modules';
+export { default as Tailwind } from './tailwind';

docs/src/app/(public)/(content)/react/components/textarea/demos/infinite-resize/tailwind/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Textarea } from '@base-ui-components/react/textarea';
+
+export default function ExampleTextarea() {
+  return (
+    <Textarea
+      placeholder="Type something…"
+      minRows={4}
+      className="field-sizing-content min-h-16 w-full max-w-64 resize-y rounded-md border border-gray-200 px-3 py-2 text-base text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-blue-800"
+    />
+  );
+}