FieldError() — ui Function Reference

Architecture documentation for the FieldError() function in field.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ FieldError() — ui Function Reference

Dependency Diagram

graph TD
  ee74be0b_5596_f8b7_c0b6_6ce4bf5afe0c["FieldError()"]
  7f790981_1f57_27c9_6405_8857e98ddfef["field.tsx"]
  ee74be0b_5596_f8b7_c0b6_6ce4bf5afe0c -->|defined in| 7f790981_1f57_27c9_6405_8857e98ddfef
  style ee74be0b_5596_f8b7_c0b6_6ce4bf5afe0c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/ui/field.tsx lines 165–214

function FieldError({
  className,
  children,
  errors,
  ...props
}: React.ComponentProps<"div"> & {
  errors?: Array<{ message?: string } | undefined>
}) {
  const content = useMemo(() => {
    if (children) {
      return children
    }

    if (!errors?.length) {
      return null
    }

    const uniqueErrors = [
      ...new Map(errors.map((error) => [error?.message, error])).values(),
    ]

    if (uniqueErrors?.length == 1) {
      return uniqueErrors[0]?.message
    }

    return (
      <ul className="ml-4 flex list-disc flex-col gap-1">
        {uniqueErrors.map(
          (error, index) =>
            error?.message && <li key={index}>{error.message}</li>
        )}
      </ul>
    )
  }, [children, errors])

  if (!content) {
    return null
  }

  return (
    <div
      role="alert"
      data-slot="field-error"
      className={cn("cn-field-error font-normal", className)}
      {...props}
    >
      {content}
    </div>
  )
}