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
  68e37c24_f5df_fe56_cdf2_47a735032ca0["input-form.tsx"]
  4b1d2128_46d9_46f0_b915_b6e1925b7876["button"]
  68e37c24_f5df_fe56_cdf2_47a735032ca0 --> 4b1d2128_46d9_46f0_b915_b6e1925b7876
  b5f68436_cf6b_fba3_fb29_abf27fd13442["field"]
  68e37c24_f5df_fe56_cdf2_47a735032ca0 --> b5f68436_cf6b_fba3_fb29_abf27fd13442
  9af00736_7b63_3c3c_87d0_68c5200c5d80["input"]
  68e37c24_f5df_fe56_cdf2_47a735032ca0 --> 9af00736_7b63_3c3c_87d0_68c5200c5d80
  d7940e38_2a13_bbd2_a77a_58753570dfd5["select"]
  68e37c24_f5df_fe56_cdf2_47a735032ca0 --> d7940e38_2a13_bbd2_a77a_58753570dfd5
  style 68e37c24_f5df_fe56_cdf2_47a735032ca0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

export function InputForm() {
  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 defaultValue="us">
              <SelectTrigger id="form-country">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="us">United States</SelectItem>
                <SelectItem value="uk">United Kingdom</SelectItem>
                <SelectItem value="ca">Canada</SelectItem>
              </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/radix/input-form.tsx (domain: DocumentationAtlas, subdomain: SearchAPI, directory: apps/v4/examples/radix).

Analyze Your Own Codebase

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

Try Supermodel Free