Newsletter

molecules

Newsletter signup — email input + submit + success state. Used in footer and dedicated landing blocks. Validates email format.

ARIA Role: form

Demo

Demo for Newsletter (molecules)

Newsletter signup — email input + submit + success state. Used in footer and dedicated landing blocks. Validates email format.

Props

PropTypeRequiredDefaultDescription
titlestringYes—

TypeScript Interface

interface NewsletterProps {
  onSubscribe: (email: string) => Promise<{ success: boolean; error?: string }>;
  title: string;
  description?: string;
  placeholder?: string;
  ctaLabel?: string;
}

Assertions (NASA Rule 5)

  • [type]email must validate as RFC 5322 (NASA Rule 7)(NASA Rule 7)
  • [aria]Error has role='alert'; success has role='status'; input has aria-describedby(WCAG 3.3.1, 4.1.3)

Usage

Import

import { Newsletter } from '@epasslive/design-system'

Basic

<Newsletter />

With Variants

<Newsletter variant="primary" size="md" />