shadcn.io is not affiliated with official shadcn/ui
Animal Cards Adoption Contact Block for React Aria
An adoption application that starts with four animal cells on shared hairlines and a slider for the hours a home is empty, with a list of the animals that suit you narrowing beside the form.
Installation
Overview
An adoption application for React with React Aria, laid out so the choice comes first. Under a start-aligned header, a band of four cells on shared hairlines runs rail to rail: dog, cat, rabbit and bird, each a real radio button with an icon, its name and how many of that kind suit the visitor. Below, split by a hairline that meets the band's rule with a + mark: at the start the application, with a slider for the hours the home is empty on a workday, the kind of home in a select, a name and an email; at the end the animals that suit the visitor, a list that narrows as the kind is chosen and the slider moves, with the count in words. Submitting checks every field, shows each problem under its field and moves focus to the first one; a valid request turns into a confirmation in the same space. It's built from Radio Group, Slider, Select, Field, Input, Guides, Shine Button and Button, with your theme's tokens for every colour. For shelters, rescues, breeders and any form where what's on offer depends on the visitor's answers.
FAQ
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 (your adoptions inbox, a CRM or a form endpoint): details holds the kind, the hours, the home, the name and the email. The confirmation repeats what was sent and promises no reply time.
Where do the animals come from?
From ANIMALS at the top of the file: each has a name, a kind, a breed, an age and alone, the most hours it can be left. They are made up for the example, and no photo is used. The list keeps the animals with alone at or above the hours on the slider (and of the chosen kind), longest first, and shows four with "and N more at the shelter" under them. Swap the array for your own animals, or fetch them and pass them in.
What do the counts say, and who hears them?
Each cell shows how many animals of its kind suit the current hours ("4 dogs"), and the list's heading says it in words ("5 cats suit you", "1 dog suits you", or that none do yet). A hidden polite line repeats the count only when a choice is made or a slider drag ends, never while the thumb moves. The slider's value is spoken in words ("6 hours").
How does the form check what's entered?
The form has noValidate, so the block shows its own messages. On submit, problems checks that a kind of animal is chosen (no card is selected to begin with), a kind of home is chosen, and the name and email are filled in (the email needs an @ and a domain). Each problem appears with an icon, the control gets aria-describedby, and focus moves to the first one, which can be the first cell. The hours always have a value.
How is the home select labelled?
The label above it names the select's button for screen readers, and focus can land on that button when no home is chosen.
The label takes an id and the Select takes aria-labelledby; the trigger takes the id that focus goes to.
How does it fit on a phone?
Below sm the four cells are a 2 by 2 grid, then the form, then the animals, each part opened by a rule with + marks. The list rows keep one height, so the block doesn't jump as animals come and go, and nothing scrolls sideways at 320 pixels. The header and the band fade up once on load; with reduced motion they simply appear.