CheckoutForm() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ CheckoutForm() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

function CheckoutForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Checkout</CardTitle>
        <CardDescription>
          Complete your order by filling in the details below
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <FieldGroup>
            <FieldSet>
              <FieldLegend>Shipping Information</FieldLegend>
              <FieldDescription>
                Enter your shipping address where we&apos;ll deliver your order
              </FieldDescription>
              <FieldGroup>
                <div className="grid grid-cols-2 gap-4">
                  <Field>
                    <FieldLabel htmlFor="checkout-7j9-first-name-dso">
                      First Name
                    </FieldLabel>
                    <Input
                      id="checkout-7j9-first-name-dso"
                      placeholder="John"
                      required
                    />
                  </Field>
                  <Field>
                    <FieldLabel htmlFor="checkout-7j9-last-name-qmb">
                      Last Name
                    </FieldLabel>
                    <Input
                      id="checkout-7j9-last-name-qmb"
                      placeholder="Doe"
                      required
                    />
                  </Field>
                </div>
                <Field>
                  <FieldLabel htmlFor="checkout-7j9-email-t33">
                    Email
                  </FieldLabel>
                  <Input
                    id="checkout-7j9-email-t33"
                    type="email"
                    placeholder="john.doe@example.com"
                    required
                  />
                  <FieldDescription>
                    We&apos;ll send your receipt to this email
                  </FieldDescription>
                </Field>
                <Field>
                  <FieldLabel htmlFor="checkout-7j9-address-zgo">
                    Street Address
                  </FieldLabel>
                  <Input
                    id="checkout-7j9-address-zgo"
                    placeholder="123 Main Street"
                    required
                  />
                </Field>
                <Field>
                  <FieldLabel htmlFor="checkout-7j9-address2-d4t">
                    Apartment, suite, etc. (optional)
                  </FieldLabel>
                  <Input
                    id="checkout-7j9-address2-d4t"
                    placeholder="Apartment 4B"
                  />
                </Field>
                <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
                  <Field className="sm:col-span-2">
                    <FieldLabel htmlFor="checkout-7j9-city-poj">
                      City
                    </FieldLabel>
                    <Input
                      id="checkout-7j9-city-poj"
                      placeholder="New York"