Rent Affordability Contact Block for React

It's the unit's monthly rent divided by the income typed, as a whole percent: $1,890 against $5,400 is 35%. The bar spans 0 to 60% so the 33% tick sits near the middle; anything past 60% fills it and anything past 100% reads "100%+". The sentence under the field says "within" or "above" the guide. Change GUIDE and SCALE at the top of the file to move the tick or the scale, and the rents in UNITS. The guide is a common rule of thumb, shown as example figures only, not advice.

No. The bar and its sentence are drawn from the income as you type, but they are plain text and a decorative bar, not a live region. A separate, hidden polite status speaks the same sentence once, when the income field loses focus or the unit changes, so typing 5,400 announces one result, not four.

It's a Number Input: digits only, no stepper buttons, because a typed income isn't a quantity to nudge. The value kept is the plain number. Base UI, Radix and React Aria show it grouped (5,400) once you leave the field; Ark UI, which the Vue, Svelte and Solid versions use, keeps the plain digits you typed. An empty or zero income is an error on submit, and the bar stays empty until there is a number.

Type a date as mm/dd/yyyy or open the calendar and pick one; the month it opens on is the current one, and days before today are greyed out. A past date typed by hand is refused too, with "Pick today or a later day." under the field. The clock is read only when the calendar opens or a date is chosen, never during render, so the server and the browser render the same page. It's required, and the confirmation echoes the date you chose.

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 a call to your leasing inbox: details holds the unit, the income, the name, the email, the lease and the move-in date. leasing@thornquill.example is on the reserved .example domain. The confirmation promises no reply time, because nothing here keeps one.

The columns stack: unit, income and the bar first, then name, email, the lease term with its total, and the move-in date, with the button full width at the end. The bar's labels (0%, the 33% guide, 60%) stay on one line down to 320 px.