ContactForm() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ContactForm() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

function ContactForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Contact Us</CardTitle>
        <CardDescription>
          Get in touch with our team for any questions or support
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <FieldGroup>
            <div className="grid grid-cols-2 gap-4">
              <Field>
                <FieldLabel htmlFor="contact-3k1-firstName-ggc">
                  First Name
                </FieldLabel>
                <Input
                  id="contact-3k1-firstName-ggc"
                  placeholder="John"
                  required
                />
              </Field>
              <Field>
                <FieldLabel htmlFor="contact-3k2-lastName-m0n">
                  Last Name
                </FieldLabel>
                <Input
                  id="contact-3k2-lastName-m0n"
                  placeholder="Doe"
                  required
                />
              </Field>
            </div>
            <Field>
              <FieldLabel htmlFor="contact-3k2-email-acn">Email</FieldLabel>
              <Input
                id="contact-3k2-email-acn"
                type="email"
                placeholder="john@example.com"
                required
              />
              <FieldDescription>
                We&apos;ll use this to contact you. We will not share your email
                with anyone else.
              </FieldDescription>
            </Field>
            <Field>
              <FieldLabel htmlFor="subject-exn">Subject</FieldLabel>
              <Select>
                <SelectTrigger>
                  <SelectValue placeholder="Select a subject" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="general">General Inquiry</SelectItem>
                  <SelectItem value="support">Technical Support</SelectItem>
                  <SelectItem value="billing">Billing Question</SelectItem>
                  <SelectItem value="partnership">Partnership</SelectItem>
                </SelectContent>
              </Select>
            </Field>
            <Field>
              <FieldLabel htmlFor="contact-3k2-message-k3i">Message</FieldLabel>
              <Textarea
                id="contact-3k2-message-k3i"
                placeholder="Tell us how we can help you..."
                className="min-h-[100px]"
                required
              />
              <FieldDescription>
                Please provide as much detail as possible to help us assist you
                better.
              </FieldDescription>
            </Field>
            <Button type="submit">Send Message</Button>
          </FieldGroup>
        </form>
      </CardContent>
    </Card>
  )
}