shadcn.io is not affiliated with official shadcn/ui
Live Count Property Search Contact Block for Ark UI
A rental search whose match count falls as you narrow it: bedrooms, a rent range, must-haves and neighbourhood chips, three example homes beside it, then a form that checks itself and confirms in place.
Installation
Overview
A contact section for React with Ark UI where the visitor searches before they write. A compact header sits over the three lowest rents among the homes that match, with the office details at the foot of that side. The other side, behind a split divider that meets the top rule with a plus, holds the search: bedrooms (Any, Studio, 1, 2, 3+) in a Segment Group, a minimum and maximum rent in Number Inputs, must-haves (garden, parking, pets welcome) in a Toggle Group, and neighbourhoods in a Combobox that takes several choices as removable chips and filters as you type. Every choice narrows one fixed list of 142 example homes, so the count above the button ("142 homes match") falls, a thin bar shrinks with it and the three rows follow. Below it come a name, an email and the Shine Button. Submitting checks the fields, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid search turns into a confirmation in the same space that repeats the search. It's built from Segment Group, Number Input, Toggle Group, Combobox, Field, Input, Guides, Shine Button and Button, with CSS transitions and your theme's tokens. The homes and rents are made up: the block says so on the page. For estate agents and lettings teams.
FAQ
Where do the 142 homes come from?
They are generated at the top of the file by homeAt, which works each home out from its place in the list (size, neighbourhood, rent, garden, parking, pets), so the same 142 appear on every render and in every framework. Replace HOMES with your own listings and keep the fits function: it is the only place the filters are applied, and the count, the bar and the three rows all read from it.
Does a screen reader hear the count on every key?
No. The visible count is plain text, and a separate hidden status line speaks it once the count has stayed the same for 700 milliseconds, and never before the visitor's first choice. Typing a rent therefore announces the result once, not for every digit.
When does the count follow a typed rent?
The count follows each key you type in the rent fields.
The two fields are plain digits with no steppers and no thousands separators, so typing "2400" always works.
How do the neighbourhood chips work?
Click the field or start typing: the list filters as you type and a chosen neighbourhood becomes a chip with its own remove button. The chosen ones stay in view while you filter. With none chosen the search covers all eight neighbourhoods, which the hint under the field says. The input clears itself after each choice.
What if nothing matches?
The three rows are replaced by one line that says no homes match and suggests widening the rent or dropping a must-have, and the count reads "0 homes match". The visitor can still send the search: the confirmation then says that no homes match yet and that someone will watch for new ones.
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 that sends search to your CRM or inbox. The name and email are the only required fields; a maximum rent below the minimum is also reported.