FormMessage() — ui Function Reference

Architecture documentation for the FormMessage() function in form.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry calls 1

Entity Profile

ComponentRegistry→ ChartRegistry→ FormMessage() — ui Function Reference

Dependency Diagram

graph TD
  37558b2d_13c9_3946_625f_cc56ad2ec60d["FormMessage()"]
  26832279_f22a_39e6_9194_59ea47194309["form.tsx"]
  37558b2d_13c9_3946_625f_cc56ad2ec60d -->|defined in| 26832279_f22a_39e6_9194_59ea47194309
  94429819_53f2_f220_12d8_b0229985d8e4["useFormField()"]
  37558b2d_13c9_3946_625f_cc56ad2ec60d -->|calls| 94429819_53f2_f220_12d8_b0229985d8e4
  style 37558b2d_13c9_3946_625f_cc56ad2ec60d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/ui/form.tsx lines 138–156

function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message ?? "") : props.children

  if (!body) {
    return null
  }

  return (
    <p
      data-slot="form-message"
      id={formMessageId}
      className={cn("text-destructive text-sm", className)}
      {...props}
    >
      {body}
    </p>
  )
}