Email Capture Light Pill CTA Block for React

An Input Group made fully round, with a little padding so the button sits inside its curve: the input has no border of its own and the button is in the group's end slot. The group draws the focus ring when its input has focus (the + marks around it stay put), and grows by two percent while the field has focus, with a CSS scale transition, which moves nothing around it. With reduced motion the growth is instant and the button's light fades in where it stands instead of sweeping.

The "Join beta" and "Requested" labels share one grid cell, so the button is as wide as the longer one, and only one is visible at a time. While the request runs the button shows its spinner over the invisible label, and after it succeeds the check label fades in. The button is marked unavailable, not disabled, so pressing it again does nothing but it stays in the tab order.

The field turns read-only and keeps the address, so the capsule shows who is signed up. Focus moves to the line under it, so a screen reader reads "You are in. Check your inbox for next steps." and the keyboard carries on from there. "Use a different address" empties the field, unlocks the capsule and puts focus back in the field.

The form has noValidate and submit calls checkValidity(), which reads the input's type="email" and required. A bad address shows its message under the capsule and returns focus to the field; typing clears it.

The request is simulated in submit: when the address passes, phase goes to "sending" and a timer (LATENCY) sets it to "done". Replace the timer with your request and set "done" when it succeeds; on failure go back to "idle" and put the reason in error. The timer is cleared when the block unmounts.

Yes. The button's label is short on purpose, "Join beta", so the field keeps enough room for an address. The capsule stays one row at every width instead of stacking, and the confirmation line wraps and reserves two lines on phones so nothing moves when it appears.