CardsForms() — ui Function Reference

Architecture documentation for the CardsForms() function in forms.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ CardsForms() — ui Function Reference

Dependency Diagram

graph TD
  dbd16e46_6e71_d655_193b_eee842064a41["CardsForms()"]
  d66096ca_8665_be40_4e76_383964be5824["forms.tsx"]
  dbd16e46_6e71_d655_193b_eee842064a41 -->|defined in| d66096ca_8665_be40_4e76_383964be5824
  style dbd16e46_6e71_d655_193b_eee842064a41 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/cards/forms.tsx lines 44–140

export function CardsForms() {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-lg">Upgrade your Subscription</CardTitle>
        <CardDescription className="text-balance">
          You are currently on the free plan. Upgrade to the pro plan to get
          access to all features.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <FieldGroup>
            <FieldGroup className="grid grid-cols-2">
              <Field>
                <FieldLabel htmlFor="name">Name</FieldLabel>
                <Input id="name" placeholder="Max Leiter" />
              </Field>
              <Field>
                <FieldLabel htmlFor="email">Email</FieldLabel>
                <Input id="email" placeholder="mail@acme.com" />
              </Field>
            </FieldGroup>
            <FieldGroup className="grid grid-cols-2 gap-3 md:grid-cols-[1fr_80px_60px]">
              <Field>
                <FieldLabel htmlFor="card-number">Card Number</FieldLabel>
                <Input
                  id="card-number"
                  placeholder="1234 1234 1234 1234"
                  className="col-span-2 md:col-span-1"
                />
              </Field>
              <Field>
                <FieldLabel htmlFor="card-number-expiry">
                  Expiry Date
                </FieldLabel>
                <Input id="card-number-expiry" placeholder="MM/YY" />
              </Field>
              <Field>
                <FieldLabel htmlFor="card-number-cvc">CVC</FieldLabel>
                <Input id="card-number-cvc" placeholder="CVC" />
              </Field>
            </FieldGroup>
            <FieldSet>
              <FieldLegend>Plan</FieldLegend>
              <FieldDescription>
                Select the plan that best fits your needs.
              </FieldDescription>
              <RadioGroup
                defaultValue="starter"
                className="grid grid-cols-2 gap-2"
              >
                {plans.map((plan) => (
                  <FieldLabel key={plan.id}>
                    <Field orientation="horizontal">
                      <FieldContent>
                        <FieldTitle>{plan.name}</FieldTitle>
                        <FieldDescription className="text-xs">
                          {plan.description}
                        </FieldDescription>
                      </FieldContent>
                      <RadioGroupItem value={plan.id} id={plan.name} />
                    </Field>
                  </FieldLabel>
                ))}
              </RadioGroup>
            </FieldSet>
            <Field>
              <FieldLabel htmlFor="notes">Notes</FieldLabel>
              <Textarea id="notes" placeholder="Enter notes" />
            </Field>
            <Field>
              <Field orientation="horizontal">
                <Checkbox id="terms" />
                <FieldLabel htmlFor="terms" className="font-normal">
                  I agree to the terms and conditions
                </FieldLabel>
              </Field>
              <Field orientation="horizontal">
                <Checkbox id="newsletter" defaultChecked />
                <FieldLabel htmlFor="newsletter" className="font-normal">