NewsletterForm() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ NewsletterForm() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function NewsletterForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Newsletter Signup</CardTitle>
        <CardDescription>
          Stay updated with our latest news and updates
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="newsletter-2q8-name-sig">Name</FieldLabel>
              <Input
                id="newsletter-2q8-name-sig"
                placeholder="Your name"
                required
              />
            </Field>
            <Field>
              <FieldLabel htmlFor="newsletter-2q8-email-wfn">Email</FieldLabel>
              <Input
                id="newsletter-2q8-email-wfn"
                type="email"
                placeholder="your@email.com"
                required
              />
              <FieldDescription>
                We&apos;ll send our newsletter to this email address.
              </FieldDescription>
            </Field>
            <FieldSet>
              <FieldLegend>Interests (Select all that apply)</FieldLegend>
              <FieldGroup data-slot="checkbox-group">
                <Field orientation="horizontal">
                  <Checkbox id="newsletter-2q8-tech-b8o" />
                  <FieldLabel
                    htmlFor="newsletter-2q8-tech-b8o"
                    className="font-normal"
                  >
                    Technology News
                  </FieldLabel>
                </Field>
                <Field orientation="horizontal">
                  <Checkbox id="newsletter-2q8-product-3rm" />
                  <FieldLabel
                    htmlFor="newsletter-2q8-product-3rm"
                    className="font-normal"
                  >
                    Product Updates
                  </FieldLabel>
                </Field>
                <Field orientation="horizontal">
                  <Checkbox id="newsletter-2q8-tips-9bh" />
                  <FieldLabel
                    htmlFor="newsletter-2q8-tips-9bh"
                    className="font-normal"
                  >
                    Tips & Tutorials
                  </FieldLabel>
                </Field>
                <Field orientation="horizontal">
                  <Checkbox id="newsletter-2q8-events-r4m" />
                  <FieldLabel
                    htmlFor="newsletter-2q8-events-r4m"
                    className="font-normal"
                  >
                    Events & Webinars
                  </FieldLabel>
                </Field>
              </FieldGroup>
            </FieldSet>
            <Field orientation="horizontal">
              <Checkbox id="newsletter-2q8-privacy-26q" required />
              <FieldLabel htmlFor="newsletter-2q8-privacy-26q">
                I agree to receive marketing emails.
              </FieldLabel>
            </Field>

            <Button type="submit">Subscribe to Newsletter</Button>