Textarea

1import { type TextareaHTMLAttributes, useId } from "react";
2import { getClassName } from "@bht-component-registry/class-names";
3import styles from "./textarea.module.scss";
4
5export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
6  /** Additional class names to merge with the component root element */
7  className?: string;
8  /** Marks the field as invalid: adds the `--invalid` modifier and sets `aria-invalid="true"` */
9  invalid?: boolean;
10}
11
12/**
13 * Bare textarea — the native `<textarea>` is this component's own root
14 * element, no built-in label/hint/error. Wrap it in `FormField` for that
15 * chrome: `<FormField label="..." htmlFor="x"><Textarea id="x" /></FormField>`.
16 */
17export const Textarea = ({
18  className,
19  id,
20  rows = 4,
21  invalid = false,
22  "aria-invalid": ariaInvalid,
23  ...rest
24}: TextareaProps) => {
25  const generatedId = useId();
26  const textareaId = id ?? generatedId;
27
28  const isInvalid = invalid || ariaInvalid === true || ariaInvalid === "true";
29
30  const [rootClass] = getClassName({
31    className,
32    modifiers: { invalid: isInvalid },
33    rootClass: "BHT__Textarea",
34    styles,
35  });
36
37  return (
38    <textarea
39      {...rest}
40      id={textareaId}
41      rows={rows}
42      className={rootClass}
43      aria-invalid={isInvalid ? true : ariaInvalid}
44    />
45  );
46};

1// Material Design 3 outlined text field, multi-line (the input only — label
2// and supporting text live in FormField).
3//
4// The 2px focus/error edge is drawn as a 1px inset shadow on top of the 1px
5// border rather than by widening the border, so the text never shifts when the
6// field gains focus.
7
8.BHT__Textarea {
9  width: 100%;
10  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
11  font-family: var(--md-sys-typescale-body-large-font, var(--font-body));
12  font-size: var(--md-sys-typescale-body-large-size, 1rem);
13  font-weight: var(--md-sys-typescale-body-large-weight, 400);
14  line-height: var(--md-sys-typescale-body-large-line-height, 1.5rem);
15  letter-spacing: var(--md-sys-typescale-body-large-tracking, 0.0313em);
16  color: var(--md-sys-color-on-surface, var(--color-on-surface));
17  caret-color: var(--md-sys-color-primary, var(--color-primary));
18  // Outlined fields have no container fill; they take the surface they sit on.
19  background: transparent;
20  border: 1px solid var(--md-sys-color-outline, var(--color-border-strong));
21  border-radius: var(--md-sys-shape-corner-extra-small, 4px);
22  transition:
23    border-color var(--md-sys-motion-duration-short-3, 150ms)
24      var(--md-sys-motion-easing-standard, ease),
25    box-shadow var(--md-sys-motion-duration-short-3, 150ms)
26      var(--md-sys-motion-easing-standard, ease);
27  outline: none;
28  resize: vertical;
29
30  &::placeholder {
31    color: var(--md-sys-color-on-surface-variant, var(--color-text-muted));
32  }
33
34  &:hover:not(:disabled, :focus) {
35    border-color: var(--md-sys-color-on-surface, var(--color-on-surface));
36  }
37
38  &:focus {
39    border-color: var(--md-sys-color-primary, var(--color-border-focus));
40    box-shadow: inset 0 0 0 1px
41      var(--md-sys-color-primary, var(--color-border-focus));
42  }
43
44  &:disabled {
45    opacity: 0.45;
46    cursor: not-allowed;
47    resize: none;
48  }
49
50  &--invalid {
51    &.BHT__Textarea {
52      border-color: var(--md-sys-color-error, var(--color-error));
53      caret-color: var(--md-sys-color-error, var(--color-error));
54
55      &:hover:not(:disabled, :focus) {
56        border-color: var(
57          --md-sys-color-on-error-container,
58          var(--color-error)
59        );
60      }
61
62      &:focus {
63        border-color: var(--md-sys-color-error, var(--color-error));
64        box-shadow: inset 0 0 0 1px
65          var(--md-sys-color-error, var(--color-error));
66      }
67    }
68  }
69}

1export { Textarea } from "./textarea.js";
2export type { TextareaProps } from "./textarea.js";

1import { FormField } from "@behivetech/forms.form-field";
2import { Textarea } from "./textarea.js";
3
4export const BasicTextarea = () => (
5  <Textarea placeholder="Type your message..." />
6);
7
8export const TextareaWithFormField = () => (
9  <FormField label="Bio" htmlFor="bio" hint="Max 200 characters.">
10    <Textarea id="bio" rows={3} />
11  </FormField>
12);
13
14export const TextareaWithError = () => (
15  <FormField
16    label="Description"
17    htmlFor="description"
18    error="Description is required."
19  >
20    <Textarea id="description" invalid />
21  </FormField>
22);
23
24export const DisabledTextarea = () => (
25  <Textarea disabled value="Cannot edit this" onChange={() => {}} />
26);

1import { render, screen } from "@testing-library/react";
2import userEvent from "@testing-library/user-event";
3import { Textarea } from "./textarea.js";
4
5describe("Textarea", () => {
6  it("renders as a textbox", () => {
7    render(<Textarea />);
8    expect(screen.getByRole("textbox")).toBeTruthy();
9  });
10
11  it("accepts typed input", async () => {
12    render(<Textarea />);
13    const field = screen.getByRole("textbox");
14    await userEvent.type(field, "hello");
15    expect(field).toHaveValue("hello");
16  });
17
18  it("is disabled when disabled prop is true", () => {
19    render(<Textarea disabled />);
20    expect(screen.getByRole("textbox")).toBeDisabled();
21  });
22
23  it("passes aria-invalid through to the root element", () => {
24    render(<Textarea aria-invalid="true" />);
25    expect(screen.getByRole("textbox").getAttribute("aria-invalid")).toBe(
26      "true",
27    );
28  });
29
30  it("adds the --invalid modifier and aria-invalid for the invalid prop", () => {
31    render(<Textarea invalid />);
32    const el = screen.getByRole("textbox");
33    expect(el.className).toContain("--invalid");
34    expect(el.getAttribute("aria-invalid")).toBe("true");
35  });
36
37  it("adds the --invalid modifier for a direct aria-invalid", () => {
38    render(<Textarea aria-invalid="true" />);
39    expect(screen.getByRole("textbox").className).toContain("--invalid");
40  });
41
42  it("has no --invalid modifier by default", () => {
43    render(<Textarea />);
44    expect(screen.getByRole("textbox").className).not.toContain("--invalid");
45  });
46
47  it("defaults to 4 rows", () => {
48    render(<Textarea />);
49    expect(screen.getByRole("textbox")).toHaveAttribute("rows", "4");
50  });
51
52  it("applies additional className", () => {
53    render(<Textarea className="custom" />);
54    expect(screen.getByRole("textbox").className).toContain("custom");
55  });
56});