FormControl() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry calls 1

Entity Profile

ComponentRegistry→ ChartRegistry→ FormControl() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/ui/form.tsx lines 107–123

function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

  return (
    <Slot.Root
      data-slot="form-control"
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
}