components/field/field.react.tsx

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1import { cloneElement, useId, type InputHTMLAttributes, type ReactElement, type ReactNode } from "react";
2
3// The props Field passes to its control. Any input, textarea or select (or a component
4// that forwards these to one) will do.
5export interface FieldControlProps {
6  id?: string;
7  required?: boolean;
8  "aria-describedby"?: string;
9  "aria-invalid"?: boolean | "true" | "false";
10}
11
12export interface FieldProps {
13  label: ReactNode;
14  // Help, shown between the label and the control and read as its description.
15  help?: ReactNode;
16  // The message for a wrong value: what is wrong and what to do. Shown beside the control.
17  error?: ReactNode;
18  // Announce the error as it appears (role="alert"). Set it for errors found on submit;
19  // leave it off for errors found when a field is left.
20  announce?: boolean;
21  // Marks the field required, on the label and on the control.
22  required?: boolean;
23  // vertical (default), horizontal (a checkbox beside its words), or responsive.
24  orientation?: "vertical" | "horizontal" | "responsive";
25  // One control: <input className="cap-input" />, a textarea or a select.
26  children: ReactElement<FieldControlProps>;
27}
28
29export function Field({ label, help, error, announce = false, required, orientation = "vertical", children }: FieldProps) {
30  const base = useId();
31  const controlId = children.props.id ?? `${base}-control`;
32  const helpId = `${base}-help`;
33  const errorId = `${base}-error`;
34  const hasError = error != null && error !== false && error !== "";
35  const describedBy = [hasError ? errorId : null, help ? helpId : null, children.props["aria-describedby"]].filter(Boolean).join(" ") || undefined;
36  const isRequired = required ?? children.props.required;
37
38  const control = cloneElement(children, {
39    id: controlId,
40    required: isRequired,
41    "aria-describedby": describedBy,
42    "aria-invalid": hasError ? true : undefined,
43  });
44
45  return (
46    <div className="cap-field" data-orientation={orientation === "vertical" ? undefined : orientation} data-invalid={hasError ? "true" : undefined}>
47      <label className="cap-field-label" htmlFor={controlId}>
48        {label}
49        {isRequired ? (
50          <span className="cap-field-required" aria-hidden="true">
51            Required
52          </span>
53        ) : null}
54      </label>
55      {help ? (
56        <p className="cap-field-help" id={helpId}>
57          {help}
58        </p>
59      ) : null}
60      {control}
61      <p className="cap-field-error" id={errorId} role={hasError && announce ? "alert" : undefined} hidden={!hasError}>
62        {hasError ? error : null}
63      </p>
64    </div>
65  );
66}
67
68// A checkbox or radio with its label: the box is drawn by CSS. `indeterminate` is set on the
69// element (it has no attribute). `variant="card"` makes the whole box the choice.
70export function Check(props: Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "style"> & { type?: "checkbox" | "radio"; label: ReactNode; variant?: "card"; indeterminate?: boolean }) {
71  const { type = "checkbox", label, variant, indeterminate, className, ...rest } = props;
72  return (
73    <label className={className ? `cap-check ${className}` : "cap-check"} data-variant={variant}>
74      <input {...rest} type={type} ref={(el) => { if (el) el.indeterminate = Boolean(indeterminate); }} />
75      {label}
76    </label>
77  );
78}
79
80// An input with addons inside one edge. Put the control inside as <input className="cap-input" />.
81export function InputGroup(props: { label?: string; children?: ReactNode }) {
82  return (
83    <div className="cap-input-group" role="group" aria-label={props.label}>
84      {props.children}
85    </div>
86  );
87}
88
89export function InputGroupAddon(props: { align?: "inline-start" | "inline-end" | "block-start" | "block-end"; children?: ReactNode }) {
90  return (
91    <div
92      className="cap-input-addon"
93      data-align={props.align ?? "inline-start"}
94      onClick={(e) => {
95        if ((e.target as HTMLElement).closest("button, a, input, select, textarea")) return;
96        e.currentTarget.parentElement?.querySelector<HTMLElement>("input, textarea")?.focus();
97      }}
98    >
99      {props.children}
100    </div>
101  );
102}