Sold Out Size Error Block for React

Everything. Notify checks the email, waits a moment and says in a polite status line that the shopper is on the list in this demo and that no email will be sent; Add to bag only records the choice. Stop notifying and Take out put each back. To make it real, send the size and the email from submit to your stock service and read stock, dates and the similar knits from your catalog.

Three ways at once: the size's letter is struck through, a small word under it says Out or In, and the chosen size is a solid fill. A screen reader hears each size named with its state ("Medium, sold out"). A sold-out size can still be chosen, because that is how you ask to be told.

From a typed ISO date per size and one fixed "today", counted with UTC day numbers ("Expected 3 Dec 2026, in 49 days"). A size with no date says so. Nothing reads the clock, and the numbers are the same on the server and in every time zone.

It is one SVG of a few paths in the text colour at low weights, hidden from assistive technology, with the facts in words beside it. The same drawing, with a cardigan collar and a roll neck, draws the two similar knits. The dashed twin is a second copy of the lines that fades in; no dash is animated, and nothing moves under reduced motion. Swap the paths for your own product shots, or keep the drawing as a placeholder.

The sizes are one single-choice toggle group: Tab reaches it, the arrow keys move between sizes and one is always chosen. The button's label and the field under the row follow the size; a refused notify moves focus to the email field and says what is wrong. The two similar knits are links in reading order after the form.

The heading, the sizes, the email field and the button come first, so the button is on the first screen; the drawn sweater and the similar knits follow them.