Risk Profile Allocation Contact Block for React

From two small tables at the top of the file. PROFILES holds each profile's mix (every one adds to 100), and TYPICAL and ROUGH hold an example yearly result for each kind of holding (7% for stocks, 3.5% for bonds and 1.5% for cash in a typical year; a 32% fall for stocks and a 7% fall for bonds in a rough one). A profile's two numbers are the mix times those results. They are made up for the demonstration, the block says so under the bar, and they are not advice or a forecast. Swap in your own method, or remove the two numbers.

It moves one profile at a time with the arrow keys; Home and End go to Cautious and Bold. The thumb is named "Risk profile" and a screen reader hears the profile's name as its value. Each profile name under the track is a real button in a group called "Risk profiles", so it also works by tap or Tab and Enter. When a change ends, one hidden status line reads the profile, its mix and its two numbers; nothing is announced while you drag.

The bar is a picture of the list beside it, so it is hidden from assistive technology and the list carries the figures as text: each holding, its swatch and its share. The three tones are the text colour at full, half and a fifth of its strength, so they follow your theme, and the bar always reads left to right, even in a right-to-left layout. With reduced motion the segments change size at once.

The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks a portfolio size, a goal, a name and an email address with an @ and a domain. Each problem appears under its field with an icon and focus moves to the first one; the select, the inputs and the group of goals are marked invalid and described by the message. Leaving a filled field checks it, and editing a field that shows an error re-checks it as you type.

Nowhere yet. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call: details holds the profile, the portfolio size, the goal, the name and the email. The confirmation repeats the profile with its mix, the size and the goal and says an adviser will write to the address given; it promises nothing else.

The bands stack and every figure keeps its place. The five profile names fit across 320 pixels under the track, the two example numbers sit side by side under the list, and the inquiry's two columns become one: the portfolio size, the name and the email, then the goals and the button.