Home / File/ display-form.tsx — ui Source File

display-form.tsx — ui Source File

Architecture documentation for display-form.tsx, a tsx file in the ui codebase. 7 imports, 0 dependents.

File tsx ComponentRegistry Styles 7 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  1dce8e38_6e82_ba24_61e4_d678d129991b["display-form.tsx"]
  3d40a3bf_c062_4304_329a_00b1b72e8523["zod"]
  1dce8e38_6e82_ba24_61e4_d678d129991b --> 3d40a3bf_c062_4304_329a_00b1b72e8523
  6d65354d_8f59_2cfc_4783_24b2eb870bc4["react-hook-form"]
  1dce8e38_6e82_ba24_61e4_d678d129991b --> 6d65354d_8f59_2cfc_4783_24b2eb870bc4
  6802ce19_522d_e5fb_e458_8826d9f6952e["zod"]
  1dce8e38_6e82_ba24_61e4_d678d129991b --> 6802ce19_522d_e5fb_e458_8826d9f6952e
  64d95022_f8e1_3e94_bb97_22b3ebca757e["use-toast"]
  1dce8e38_6e82_ba24_61e4_d678d129991b --> 64d95022_f8e1_3e94_bb97_22b3ebca757e
  aa2f3ec6_f291_3763_88ec_65a3f5ad5939["button"]
  1dce8e38_6e82_ba24_61e4_d678d129991b --> aa2f3ec6_f291_3763_88ec_65a3f5ad5939
  fe882581_4266_6b26_b40f_462b3a19ebd0["checkbox"]
  1dce8e38_6e82_ba24_61e4_d678d129991b --> fe882581_4266_6b26_b40f_462b3a19ebd0
  7a6b0be4_eca5_4970_1a93_79d670ef529e["form"]
  1dce8e38_6e82_ba24_61e4_d678d129991b --> 7a6b0be4_eca5_4970_1a93_79d670ef529e
  style 1dce8e38_6e82_ba24_61e4_d678d129991b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { toast } from "@/registry/new-york/hooks/use-toast"
import { Button } from "@/registry/new-york/ui/button"
import { Checkbox } from "@/registry/new-york/ui/checkbox"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/registry/new-york/ui/form"

const items = [
  {
    id: "recents",
    label: "Recents",
  },
  {
    id: "home",
    label: "Home",
  },
  {
    id: "applications",
    label: "Applications",
  },
  {
    id: "desktop",
    label: "Desktop",
  },
  {
    id: "downloads",
    label: "Downloads",
  },
  {
    id: "documents",
    label: "Documents",
  },
] as const

const displayFormSchema = z.object({
  items: z.array(z.string()).refine((value) => value.some((item) => item), {
    message: "You have to select at least one item.",
  }),
})

type DisplayFormValues = z.infer<typeof displayFormSchema>

// This can come from your database or API.
const defaultValues: Partial<DisplayFormValues> = {
  items: ["recents", "home"],
}

export function DisplayForm() {
// ... (73 more lines)

Subdomains

Functions

Dependencies

  • button
  • checkbox
  • form
  • react-hook-form
  • use-toast
  • zod
  • zod

Frequently Asked Questions

What does display-form.tsx do?
display-form.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, Styles subdomain.
What functions are defined in display-form.tsx?
display-form.tsx defines 1 function(s): DisplayForm.
What does display-form.tsx depend on?
display-form.tsx imports 7 module(s): button, checkbox, form, react-hook-form, use-toast, zod, zod.
Where is display-form.tsx in the architecture?
display-form.tsx is located at deprecated/www/app/(app)/examples/forms/display/display-form.tsx (domain: ComponentRegistry, subdomain: Styles, directory: deprecated/www/app/(app)/examples/forms/display).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free