shadcn.io is not affiliated with official shadcn/ui
Rent Affordability Contact Block for Vue
A rental inquiry card in card where a monthly income fills a rent-to-income bar with a 33% guide tick, beside a lease term, a move-in date picker and a name and email.
Installation
Overview
A rental inquiry for Vue with Ark UI, for a building such as the fictional Thornquill Apartments. Under a start-aligned header, a wide card in card on +-marked corners holds one form in two columns split by a hairline. The first column tests the rent: a unit chosen from a Select (each option shows its rent below the field), a monthly income typed into a Number Input with a dollar sign and "a month" inside it, and under it a Progress bar that fills as rent as a share of income, with a fixed tick at the 33% guide and a sentence that says whether the share is within it. The second column is the person: name, email, a lease term of 6, 12, 18 or 24 months in a Segment Group with a line under it that totals the rent over the term, and a move-in date in a Date Picker that locks past days. Submitting checks every field, shows each problem under its field and moves focus to the first one; a valid inquiry turns into a confirmation in the same space that repeats the unit, the lease, the move-in date and the share. On a phone the money comes first and the person after it. It's built from Frame, Select, Number Input, Progress, Segment Group, Date Picker, Field, Input, Guides, Shine Button and Button. For landlords, property managers and leasing offices. The figures are an example, not advice.
FAQ
How is the share worked out?
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.
Does a screen reader hear the bar change on every keystroke?
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.
How does the income field behave?
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.
How does the move-in date work?
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.
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 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.