import * as React from "react";

import { cn } from "@/lib/utils";

export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string;
  description?: string;
  error?: React.ReactNode;
  required?: boolean;
  id?: string;
  labelClassName?: string;
  descriptionClassName?: string;
  errorClassName?: string;
}

export function FormField({
  label,
  description,
  error,
  required,
  id,
  className,
  labelClassName,
  descriptionClassName,
  errorClassName,
  children,
  ...props
}: FormFieldProps) {
  return (
    <div className={cn("flex flex-col gap-2", className)} {...props}>
      <label
        htmlFor={id}
        className={cn("text-sm font-medium text-foreground", labelClassName)}
      >
        <span>{label}</span>
        {required ? (
          <span className="ml-1 text-primary" aria-hidden="true">
            *
          </span>
        ) : null}
      </label>
      {description ? (
        <p className={cn("text-sm text-muted-foreground", descriptionClassName)}>
          {description}
        </p>
      ) : null}
      {children}
      {error ? (
        <p className={cn("text-sm text-primary", errorClassName)}>{error}</p>
      ) : null}
    </div>
  );
}
Form Field

Dependencies

Files

Installation
