Contents

import React from "react";

interface LabelledFieldProps {
  label: string;
  children: React.ReactNode;
  htmlFor?: string;
  description?: string;
  errors?: string[];
}

export default function LabelledField(props: LabelledFieldProps) {
  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 && (
          <React.Fragment>
            {" "}
            <span className="error">{errors[errors.length - 1]}</span>
          </React.Fragment>
        )}
      </label>
      {description && <p className="description">{description}</p>}
      {children}
    </div>
  );
}

Version data entries

4 entries across 4 versions & 1 rubygems

Version	Path
pages_core-3.15.4	app/javascript/components/LabelledField.tsx
pages_core-3.15.3	app/javascript/components/LabelledField.tsx
pages_core-3.15.2	app/javascript/components/LabelledField.tsx
pages_core-3.15.1	app/javascript/components/LabelledField.tsx