Email Input Form
Loading playground
Overview
EmailInputForm is the email-capture field and submit button used inside NewsletterRegistration, PopUpNewsletter, and standalone footer signups. The form is accessible and validation-ready, with optional placeholder and label.
EmailInputFormDisplay is the display sub-component. Use it to separate the form chrome from the success or empty state when you need finer control over rendering.
Both accept a variant prop ('boxed' | 'plain'), forwarded to the underlying Input. Pick plain when the signup sits on an already-colored surface — a footer or popup — so the email field renders flush via the plain Input styling instead of its own bordered box.
Key Business & UX Benefits
- One signup field drops into footers, popups, and dedicated sections, so the same primitive grows the subscriber list everywhere it appears.
- Built-in accessibility and validation reduce drop-off on the highest-friction step of marketing acquisition.
- Splitting form chrome from the success state via the display sub-component gives teams full control over post-signup messaging.
- Editors place the form anywhere in Studio, opening signup placements that engineering would otherwise have to ticket.
EmailInputForm in the footer so signup is always available without a separate page.Feature List
- Email field plus submit button reused inside NewsletterRegistration, PopUpNewsletter, and standalone footer signups
- Accessible and validation-ready out of the box, with optional placeholder and label
- EmailInputFormDisplay sub-component separates form chrome from success or empty states for finer rendering control
- Drops into any layout, so the same primitive grows the subscriber list everywhere it appears
- Editors place the form anywhere in Studio without engineering tickets
LEmailInputForm
| Prop | Default | Type |
|---|---|---|
variant | "subtle" | "plain" | "outline"Forwarded to the email Input. Defaults to the Input's own default. | |
emailPlaceholder | string | |
emailButton | { text, ariaLabel, iconRight, 1 more } | |
statusMessages | { showPartyPopperEmojis, loadingText, successText, 6 more } |
LEmailInputFormDisplay
| Prop | Default | Type |
|---|---|---|
staterequired | "error" | "loading" | "success" | "initial" | "already-registered" | |
variant | "subtle" | "plain" | "outline"Forwarded to the email Input. Defaults to the Input's own default. | |
emailPlaceholder | string | |
emailButton | { text, ariaLabel, iconRight, 1 more } | |
statusMessages | { showPartyPopperEmojis, loadingText, successText, 6 more } |
| Event | Type |
|---|---|
reset | (event: "reset"): void |
submit | (event: "submit", value: string): void |
Changelog
EmailInputForm and EmailInputFormDisplay gained a variant ('boxed' | 'plain') prop, forwarded to the underlying Input. The plain variant paints resting backgrounds and borders from the --input-field-plain-* tokens, so a footer or popup signup can sit flush on an already-styled surface.