Scale — Signup

Install

Examples

Default

Custom labels

Set placeholder and button-label for other capture flows.

States

loading shows the button spinner while submitting; disabled turns the whole control off.

Live validation

Listen for submit, then set state and help-text from your handler. Try submitting empty, then “foo”, then a real email.

Guidelines

Usage

newsletter and waitlist capture inline on a page. For the full marketing block with heading and subtext, use Section Signup. Emits submit with the entered value; set state + help-text from your handler to show validation.

Do

Give immediate feedback on submit via state + help-text.
Show loading while the request is in flight.
Keep the button label action-led — “Sign up”, “Subscribe”.

Don’t

Don’t use it for full forms — compose Inputs and a Button instead.
Don’t leave a submit without feedback; always resolve to success or error.
Don’t rely on placeholder text as the field’s only accessible name.

Accessibility

Field name: the inner input has no visible label, so give it an accessible name (e.g. an adjacent <label> or context) rather than relying on the placeholder alone.
Keyboard: Enter in the field submits, the same as clicking the button.
Validation: set state="negative" with a help-text message so the error isn’t colour-only; the help text is exposed to assistive tech.
Loading / disabled: loading sets the button’s busy state; disabled turns off both the input and button.

Properties

Input — the field this composes.
Section Signup — the full marketing block with heading and subtext.
Button — the submit action.

Signup