shadcn.io is not affiliated with official shadcn/ui
Premium Builder Contact Block for Radix UI
A home-cover quote for an insurer, split by a hairline: a slider over five levels of cover and three risk switches at the start, a premium built line by line and a short form at the end.
Installation
Overview
A home-cover quote section for React with Radix UI, split by a hairline that meets the page's top rule with a + mark. At the start, a compact header, a slider over five levels of cover ($150,000 to $750,000, each named under the track), three switches for what applies to the home (an alarm is fitted, it is in a flood zone, a claim in the last five years) and a band of contact details. At the end, the yearly premium at display size with the monthly figure under it, a breakdown (the base for your cover, then one line per switch that shows its effect when it is on and "No change" when it is off), and a form with a name, an email and a ZIP code. Submitting checks every field, shows each problem under its field and moves focus to the first one; a valid request turns the end column into a confirmation while the choices stay where they are. It's built from Slider, Switch, Field, Input, Sliding Number, Guides and Shine Button, with your theme's tokens for every colour. For insurers and brokers whose price depends on a few facts the visitor knows.
FAQ
How is the premium worked out?
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.
Why is the cover a slider over five levels, not dollars?
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.
What do the switches do for a keyboard and a screen reader?
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.
How does the form check what's typed?
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.
Where does the form send its data?
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.
How does it fit on a phone?
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.