ShippingForm() — ui Function Reference

Architecture documentation for the ShippingForm() function in shipping-form.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ ShippingForm() — ui Function Reference

Dependency Diagram

graph TD
  57afe297_4a8d_88ac_8c78_5377cfea461d["ShippingForm()"]
  8e63a198_6d6c_4d1f_a1b9_a36e156affc7["shipping-form.tsx"]
  57afe297_4a8d_88ac_8c78_5377cfea461d -->|defined in| 8e63a198_6d6c_4d1f_a1b9_a36e156affc7
  style 57afe297_4a8d_88ac_8c78_5377cfea461d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/(pages)/forms/shipping-form.tsx lines 20–121

export function ShippingForm() {
  return (
    <FieldSet>
      <FieldLegend>Shipping Details</FieldLegend>
      <FieldDescription>
        Please provide your shipping details so we can deliver your order.
      </FieldDescription>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="street-address">Street Address</FieldLabel>
          <Input id="street-address" autoComplete="off" />
        </Field>
        <Field>
          <FieldLabel htmlFor="city">City</FieldLabel>
          <Input id="city" />
        </Field>
        <FieldSet>
          <FieldLegend variant="label">Shipping Method</FieldLegend>
          <FieldDescription>
            Please select the shipping method for your order.
          </FieldDescription>
          <RadioGroup>
            <Field orientation="horizontal">
              <RadioGroupItem value="standard" id="shipping-method-1" />
              <FieldLabel htmlFor="shipping-method-1" className="font-normal">
                Standard{" "}
                <Badge className="rounded-full py-px" variant="outline">
                  Free
                </Badge>
              </FieldLabel>
            </Field>
            <Field orientation="horizontal">
              <RadioGroupItem value="express" id="shipping-method-2" />
              <FieldLabel htmlFor="shipping-method-2" className="font-normal">
                Express
              </FieldLabel>
            </Field>
          </RadioGroup>
        </FieldSet>
        <Field>
          <FieldLabel htmlFor="message">Message</FieldLabel>
          <Textarea id="message" />
          <FieldDescription>Anything else you want to add?</FieldDescription>
        </Field>
        <FieldSet>
          <FieldLegend>Additional Items</FieldLegend>
          <FieldDescription>
            Please select the additional items for your order.
          </FieldDescription>
          <FieldGroup data-slot="checkbox-group">
            <FieldLabel htmlFor="gift-wrapping">
              <Field orientation="horizontal">
                <Checkbox
                  value="gift-wrapping"
                  id="gift-wrapping"
                  aria-label="Gift Wrapping"
                />
                <FieldContent>
                  <FieldTitle>Gift Wrapping</FieldTitle>
                  <FieldDescription>
                    Add elegant gift wrapping with a personalized message.
                  </FieldDescription>
                </FieldContent>
              </Field>
            </FieldLabel>
            <FieldLabel htmlFor="insurance">
              <Field orientation="horizontal">
                <Checkbox
                  value="insurance"
                  id="insurance"
                  aria-label="Package Insurance"
                />
                <FieldContent>
                  <FieldTitle>Package Insurance</FieldTitle>
                  <FieldDescription>
                    Protect your shipment with comprehensive insurance coverage.
                  </FieldDescription>
                </FieldContent>
              </Field>
            </FieldLabel>
            <FieldLabel htmlFor="signature-confirmation">