Text Field

1import { type InputHTMLAttributes, useId } from "react";
2import { getClassName } from "@behivetech/get-class-name";
3import styles from "./text-field.module.scss";
4
5export interface TextFieldProps extends Omit<
6  InputHTMLAttributes<HTMLInputElement>,
7  "size"
8> {
9  /** Additional class names to merge with the component root element */
10  className?: string;
11}
12
13/**
14 * Bare text input — the native `<input>` is this component's own root
15 * element, no built-in label/hint/error. Wrap it in `FormField` for that
16 * chrome: `<FormField label="..." htmlFor="x"><TextField id="x" /></FormField>`.
17 */
18export const TextField = ({ className, id, ...rest }: TextFieldProps) => {
19  const generatedId = useId();
20  const fieldId = id ?? generatedId;
21
22  const [rootClass] = getClassName({
23    className,
24    rootClass: "BHT__TextField",
25    styles,
26  });
27
28  return <input {...rest} id={fieldId} className={rootClass} />;
29};

1// Material Design 3 outlined text field (the input only — label and supporting
2// 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__TextField {
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  min-height: 2.5rem;
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  }
48
49  &[aria-invalid="true"] {
50    border-color: var(--md-sys-color-error, var(--color-error));
51    caret-color: var(--md-sys-color-error, var(--color-error));
52
53    &:hover:not(:disabled, :focus) {
54      border-color: var(--md-sys-color-on-error-container, var(--color-error));
55    }
56
57    &:focus {
58      border-color: var(--md-sys-color-error, var(--color-error));
59      box-shadow: inset 0 0 0 1px var(--md-sys-color-error, var(--color-error));
60    }
61  }
62}

1export { TextField } from "./text-field.js";
2export type { TextFieldProps } from "./text-field.js";

1import { useState } from "react";
2import { FormField } from "@behivetech/forms.form-field";
3import { TextField } from "./text-field.js";
4
5export const BasicTextField = () => {
6  const [value, setValue] = useState("");
7  return (
8    <TextField
9      value={value}
10      onChange={(e) => setValue(e.target.value)}
11      placeholder="Type here…"
12    />
13  );
14};
15
16export const TextFieldWithFormField = () => (
17  <FormField label="Email" htmlFor="email" hint="We'll never share this">
18    <TextField id="email" type="email" placeholder="you@example.com" />
19  </FormField>
20);
21
22export const TextFieldWithError = () => (
23  <FormField
24    label="Email"
25    htmlFor="email-error"
26    error="A valid email is required"
27  >
28    <TextField id="email-error" type="email" aria-invalid="true" />
29  </FormField>
30);
31
32export const DisabledTextField = () => (
33  <TextField disabled value="Can't touch this" />
34);

1import { render, screen } from "@testing-library/react";
2import userEvent from "@testing-library/user-event";
3import { TextField } from "./text-field.js";
4
5describe("TextField", () => {
6  it("renders as a textbox", () => {
7    render(<TextField />);
8    expect(screen.getByRole("textbox")).toBeTruthy();
9  });
10
11  it("accepts typed input", async () => {
12    render(<TextField />);
13    const field = screen.getByRole("textbox");
14    await userEvent.type(field, "hello");
15    expect(field).toHaveValue("hello");
16  });
17
18  it("does not accept input when disabled", async () => {
19    render(<TextField disabled />);
20    expect(screen.getByRole("textbox")).toBeDisabled();
21  });
22
23  it("passes aria-invalid through to the root element", () => {
24    render(<TextField aria-invalid="true" />);
25    expect(screen.getByRole("textbox").getAttribute("aria-invalid")).toBe(
26      "true",
27    );
28  });
29
30  it("applies additional className", () => {
31    render(<TextField className="custom" />);
32    expect(screen.getByRole("textbox").className).toContain("custom");
33  });
34
35  it("generates an id when none is provided", () => {
36    render(<TextField />);
37    expect(screen.getByRole("textbox").id).toBeTruthy();
38  });
39});