Premium Builder Contact Block for React

The base is the cover times a made-up rate (RATE, $3.40 for every $1,000 of cover). Each switch that is on adds or takes off a percentage of that base: 8% off for an alarm, 22% on for a flood zone and 15% on for a recent claim, set in FACTORS at the top of the file. The total is the base plus every effect, and the monthly figure is the total divided by twelve. All of it is example data, the block says so beside the button, and none of it is a quote or advice.

The levels are not evenly spaced ($150,000, $250,000, $350,000, $500,000, $750,000), so the slider moves over their index and each name sits under its stop. The thumb is named "Cover for the home" and a screen reader hears the level as dollars ("$350,000 of cover"). The names under the track are decoration for sighted users and are hidden from assistive technology. When a change ends, one hidden status line says the cover and the premium in a sentence; nothing is announced while you drag.

Each switch is named by its question ("An alarm is fitted"), toggles with Space and, when it changes, the same hidden status line reads out the new premium. The breakdown beside them keeps all three lines in place, so turning one on never moves what is below it.

The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks a name, an email address with an @ and a domain, and a ZIP code of exactly five digits. Each problem appears under its field with an icon, the control is marked invalid and described by the message, and focus moves to the first one. 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 cover level, the switches, the name, the email and the ZIP code. The confirmation repeats the cover, the ZIP code and the example premium and says a broker will write to the address given; it promises nothing else.

Below lg the split stacks: the header, the cover and the switches, the premium and the form, then the contact details, each part opened by a rule with + marks. The five level names fit 320 pixels, name and email go one per row and the button goes full width. The premium's figure and its monthly line keep their place as the cover changes.