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

input-form.tsx — ui Source File

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

File tsx DocumentationAtlas SearchAPI 4 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  a2a11a69_d3ad_e3ea_c3e1_3cc4392a7188["input-form.tsx"]
  4544fa74_9b37_0912_c55e_f4ff161b8e83["button"]
  a2a11a69_d3ad_e3ea_c3e1_3cc4392a7188 --> 4544fa74_9b37_0912_c55e_f4ff161b8e83
  e6c524b5_d047_d4f9_50b2_7f100d612cb2["field"]
  a2a11a69_d3ad_e3ea_c3e1_3cc4392a7188 --> e6c524b5_d047_d4f9_50b2_7f100d612cb2
  9a309fc5_4306_d01f_08ce_72db23e48652["input"]
  a2a11a69_d3ad_e3ea_c3e1_3cc4392a7188 --> 9a309fc5_4306_d01f_08ce_72db23e48652
  9e04de79_0b92_db17_84ad_a529f1990b55["select"]
  a2a11a69_d3ad_e3ea_c3e1_3cc4392a7188 --> 9e04de79_0b92_db17_84ad_a529f1990b55
  style a2a11a69_d3ad_e3ea_c3e1_3cc4392a7188 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { Button } from "@/examples/base/ui/button"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/examples/base/ui/field"
import { Input } from "@/examples/base/ui/input"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/examples/base/ui/select"

export function InputForm() {
  const countries = [
    { label: "United States", value: "us" },
    { label: "United Kingdom", value: "uk" },
    { label: "Canada", value: "ca" },
  ]
  return (
    <form className="w-full max-w-sm">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="form-name">Name</FieldLabel>
          <Input
            id="form-name"
            type="text"
            placeholder="Evil Rabbit"
            required
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="form-email">Email</FieldLabel>
          <Input id="form-email" type="email" placeholder="john@example.com" />
          <FieldDescription>
            We&apos;ll never share your email with anyone.
          </FieldDescription>
        </Field>
        <div className="grid grid-cols-2 gap-4">
          <Field>
            <FieldLabel htmlFor="form-phone">Phone</FieldLabel>
            <Input id="form-phone" type="tel" placeholder="+1 (555) 123-4567" />
          </Field>
          <Field>
            <FieldLabel htmlFor="form-country">Country</FieldLabel>
            <Select items={countries} defaultValue="us">
              <SelectTrigger id="form-country">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  {countries.map((country) => (
                    <SelectItem key={country.value} value={country.value}>
                      {country.label}
                    </SelectItem>
                  ))}
                </SelectGroup>
              </SelectContent>
            </Select>
          </Field>
        </div>
        <Field>
          <FieldLabel htmlFor="form-address">Address</FieldLabel>
          <Input id="form-address" type="text" placeholder="123 Main St" />
        </Field>
        <Field orientation="horizontal">
          <Button type="button" variant="outline">
            Cancel
          </Button>
          <Button type="submit">Submit</Button>
        </Field>
      </FieldGroup>
    </form>
  )
}

Domain

Subdomains

Functions

Dependencies

  • button
  • field
  • input
  • select

Source

Frequently Asked Questions

What does input-form.tsx do?
input-form.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, SearchAPI subdomain.
What functions are defined in input-form.tsx?
input-form.tsx defines 1 function(s): InputForm.
What does input-form.tsx depend on?
input-form.tsx imports 4 module(s): button, field, input, select.
Where is input-form.tsx in the architecture?
input-form.tsx is located at apps/v4/examples/base/input-form.tsx (domain: DocumentationAtlas, subdomain: SearchAPI, directory: apps/v4/examples/base).

Analyze Your Own Codebase

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

Try Supermodel Free