ComplexFormDemo() — ui Function Reference

Architecture documentation for the ComplexFormDemo() function in field-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ ComplexFormDemo() — ui Function Reference

Dependency Diagram

graph TD
  cdf93f44_51d6_dcfb_5d76_b29511ce1ec4["ComplexFormDemo()"]
  b9b36d9d_9701_6134_d4ee_41213e7f1788["field-demo.tsx"]
  cdf93f44_51d6_dcfb_5d76_b29511ce1ec4 -->|defined in| b9b36d9d_9701_6134_d4ee_41213e7f1788
  style cdf93f44_51d6_dcfb_5d76_b29511ce1ec4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/field-demo.tsx lines 3922–4170

export function ComplexFormDemo() {
  return (
    <Card className="w-full max-w-3xl">
      <CardHeader>
        <CardTitle>Job Application Form</CardTitle>
        <CardDescription>
          Complete all sections to submit your application
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <FieldGroup>
            <FieldSet>
              <FieldLegend>Personal Information</FieldLegend>
              <FieldDescription>
                Your basic contact information.
              </FieldDescription>
              <FieldGroup>
                <div className="grid grid-cols-2 gap-4">
                  <Field>
                    <FieldLabel htmlFor="complex-6d8-firstName-dsv">
                      First Name
                    </FieldLabel>
                    <Input
                      id="complex-6d8-firstName-dsv"
                      placeholder="John"
                      required
                    />
                  </Field>
                  <Field>
                    <FieldLabel htmlFor="complex-6d8-lastName-i08">
                      Last Name
                    </FieldLabel>
                    <Input
                      id="complex-6d8-lastName-i08"
                      placeholder="Doe"
                      required
                    />
                  </Field>
                </div>

                <Field>
                  <FieldLabel htmlFor="complex-6d8-email-yq8">
                    Email Address
                  </FieldLabel>
                  <Input
                    id="complex-6d8-email-yq8"
                    type="email"
                    placeholder="john.doe@example.com"
                    required
                  />
                  <FieldDescription>
                    We&apos;ll use this for all communications.
                  </FieldDescription>
                </Field>
                <Field>
                  <FieldLabel htmlFor="complex-6d8-phone-a7k">
                    Phone Number
                  </FieldLabel>
                  <Input
                    id="complex-6d8-phone-a7k"
                    type="tel"
                    placeholder="+1 (555) 123-4567"
                  />
                </Field>
              </FieldGroup>
            </FieldSet>
            <FieldSeparator />
            <FieldSet>
              <FieldLegend>Professional Background</FieldLegend>
              <FieldGroup>
                <Field>
                  <FieldLabel htmlFor="position-k7f">
                    Position Applying For
                  </FieldLabel>
                  <Select>
                    <SelectTrigger id="position-k7f">
                      <SelectValue placeholder="Select a position" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="frontend">