Contents

import { Fragment } from "react";

type Props = {
  label: string;
  children: React.ReactNode;
  htmlFor?: string;
  description?: string;
  errors?: string[];
};

export default function LabelledField(props: Props) {
  const { htmlFor, description, label, errors, children } = props;

  const classNames = ["field"];
  if (errors && errors.length > 0) {
    classNames.push("field-with-errors");
  }

  return (
    <div className={classNames.join(" ")}>
      <label htmlFor={htmlFor}>
        {label}
        {errors && (
          <Fragment>
            {" "}
            <span className="error">{errors[errors.length - 1]}</span>
          </Fragment>
        )}
      </label>
      {description && <p className="description">{description}</p>}
      {children}
    </div>
  );
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
pages_core-3.15.5	app/javascript/components/LabelledField.tsx