EmailCapture
A one-field sign-up form with validation and a result message.
In context
Product
Tideline mobile, in beta from 7 Nov
Offline tasks and a quiet inbox for the crew.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
onSubmit | (email: string) => void | Promise<void> | Yes | — |
label | string | undefined | No | Email address |
placeholder | string | undefined | No | you@example.com |
submitLabel | string | undefined | No | Notify me |
successMessage | string | undefined | No | Thanks, you're on the list. |
errorMessage | string | undefined | No | Something went wrong. Please try again. |
helperText | ReactNode | No | — |
States
data-rebar-state is idle, submitting, success or error. Client-side validation runs first: an empty or malformed address stays idle, marks the input aria-invalid, links the inline message with aria-describedby, and moves focus back to the input. onSubmit is only called with a trimmed, valid address. A rejected promise or a throw becomes error (the address is kept so the person can retry); success clears the input. The component never touches the network itself.
Accessibility
The input has a real <label>, visually hidden by default; add data-rebar-label-visible to the form to show it. Success and error messages go in a role="status" aria-live="polite" region that is always in the DOM, so they are announced when they appear. The submit button is disabled while submitting, and a second submit during that time is ignored.
data-rebar-* attributes
data-rebar-component="email-capture" and data-rebar-state on the root form; data-rebar-part values label, row, helper, error and status (the status carries data-rebar-tone of success or error). The input and button are the real Input and Button components.
Migrating to Ant Design
Not codemod-covered. The nearest Ant Design shape is a Form with one Form.Item of type email plus Space.Compact; the submit state machine has to be rewritten by hand. The email-capture placement block binds onSubmit through BlockRenderer's handlers prop.