Newsletter Form

Preview

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

npx shadcn@latest add https://ds.interlace.tools/r/newsletter-form.json

npx shadcn@latest add @interlace/newsletter-form

Import

2 named exports — pull the parts you need.

import { MIN_VIEWPORT, NewsletterForm } from '@/components/ui/patterns/newsletter-form';

Anatomy

Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.

NewsletterForm                    (block — data-min-viewport=320)
    ├─ Typography variant=h3        (title)
    ├─ Typography variant=body      (description — optional)
    ├─ Form                         (the <form> element from primitives/form.tsx)
    │   ├─ Field name="email"
    │   │   ├─ FieldLabel
    │   │   └─ FieldControl render={<Input type="email" />}
    │   ├─ <label> Checkbox + consentLabel
    │   ├─ <input type="text" name="website" /> (honeypot — sr-only, aria-hidden)
    │   └─ Button type="submit"
    └─ <slot for footer>

API reference

Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.

Skeleton

Pass loading and the component renders a shape-matched <Skeleton /> in its own place — same box, so nothing reflows when the data lands. Below is the same story with loading={true}.

<MIN_VIEWPORT loading={isPending} />

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour

Native element semantics — no interaction layer to get wrong.

Focus ring (WCAG 2.2 SC 2.4.13)

Not focusable — no focus indicator required.

Reduced motion

No animation to gate.

ARIA in the source

None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.

Examples

3 more states from the same story file.

R-rule compliance

Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.

Dependencies

Base UI primitive

Native / no Base UI dependency

Lucide icons

none

NPM dependencies

none

Registry dependencies

• @interlace/theme
• @interlace/button
• @interlace/checkbox
• @interlace/form
• @interlace/input
• @interlace/skeleton
• @interlace/stack
• @interlace/typography

Source

The full implementation — components/ui/patterns/newsletter-form.tsx once installed.

import * as React from 'react';

// @interlace/newsletter-form v1.2.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/newsletter-form
// What changed since: https://ds.interlace.tools/c/newsletter-form#history
// Generated banner — keep it, the upgrade diff reads this version.

/**
 * @interlace/ui — NewsletterForm
 *
 * Canonical email-signup pattern: title + (optional) description + email
 * field + consent checkbox + submit. Composition of the auth primitive set
 * (Form / Field / Input / Button + Checkbox + Typography). The block owns
 * *structure*; consumers wire `action` and pass brand copy via props.
 *
 * Includes a honeypot `<input type="text" name="website">` rendered with
 * `tabIndex={-1}`, `aria-hidden`, and `.sr-only` — invisible + unreachable
 * to humans + assistive tech, but auto-filled by naive form-spam bots. The
 * server handler should reject any submission where `website` is non-empty.
 *

…151 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.