ui Architecture Docs
Home / File/ form-tanstack-select.tsx — ui Source File

form-tanstack-select.tsx — ui Source File

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

File tsx ComponentRegistry ChartRegistry 7 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  904ca795_89fa_16d2_0a44_562c2dae0279["form-tanstack-select.tsx"]
  32ce9c09_437f_bced_67c5_ff04d8757a76["react-form"]
  904ca795_89fa_16d2_0a44_562c2dae0279 --> 32ce9c09_437f_bced_67c5_ff04d8757a76
  e750d152_1191_1793_7244_99c7f9c595f4["sonner"]
  904ca795_89fa_16d2_0a44_562c2dae0279 --> e750d152_1191_1793_7244_99c7f9c595f4
  6802ce19_522d_e5fb_e458_8826d9f6952e["zod"]
  904ca795_89fa_16d2_0a44_562c2dae0279 --> 6802ce19_522d_e5fb_e458_8826d9f6952e
  57e86e45_ac6e_7278_be08_9092724e8401["button"]
  904ca795_89fa_16d2_0a44_562c2dae0279 --> 57e86e45_ac6e_7278_be08_9092724e8401
  c6d6139d_ea69_3d79_5004_68419bae2ac0["card"]
  904ca795_89fa_16d2_0a44_562c2dae0279 --> c6d6139d_ea69_3d79_5004_68419bae2ac0
  169af77a_46c3_8fec_4801_f34a0f1a3471["field"]
  904ca795_89fa_16d2_0a44_562c2dae0279 --> 169af77a_46c3_8fec_4801_f34a0f1a3471
  c2fa7225_1ddd_1cbc_8810_ee5e42af14d6["select"]
  904ca795_89fa_16d2_0a44_562c2dae0279 --> c2fa7225_1ddd_1cbc_8810_ee5e42af14d6
  style 904ca795_89fa_16d2_0a44_562c2dae0279 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/* eslint-disable react/no-children-prop */
"use client"

import { useForm } from "@tanstack/react-form"
import { toast } from "sonner"
import * as z from "zod"

import { Button } from "@/registry/new-york-v4/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/new-york-v4/ui/card"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/registry/new-york-v4/ui/field"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/registry/new-york-v4/ui/select"

const spokenLanguages = [
  { label: "English", value: "en" },
  { label: "Spanish", value: "es" },
  { label: "French", value: "fr" },
  { label: "German", value: "de" },
  { label: "Italian", value: "it" },
  { label: "Chinese", value: "zh" },
  { label: "Japanese", value: "ja" },
] as const

const formSchema = z.object({
  language: z
    .string()
    .min(1, "Please select your spoken language.")
    .refine((val) => val !== "auto", {
      message:
        "Auto-detection is not allowed. Please select a specific language.",
    }),
})

export default function FormTanstackSelect() {
  const form = useForm({
    defaultValues: {
      language: "",
    },
    validators: {
      onSubmit: formSchema,
// ... (100 more lines)

Domain

Subdomains

Functions

Dependencies

  • button
  • card
  • field
  • react-form
  • select
  • sonner
  • zod

Source

Frequently Asked Questions

What does form-tanstack-select.tsx do?
form-tanstack-select.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in form-tanstack-select.tsx?
form-tanstack-select.tsx defines 1 function(s): FormTanstackSelect.
What does form-tanstack-select.tsx depend on?
form-tanstack-select.tsx imports 7 module(s): button, card, field, react-form, select, sonner, zod.
Where is form-tanstack-select.tsx in the architecture?
form-tanstack-select.tsx is located at apps/v4/registry/new-york-v4/examples/form-tanstack-select.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: apps/v4/registry/new-york-v4/examples).

Analyze Your Own Codebase

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

Try Supermodel Free