shadcn.io is not affiliated with official shadcn/ui
Add Another Pet Contact Block for Vue
A visit request for a pet sitter that grows with the household: a cell for each pet (species, name, age, vaccinations) that you add and remove, then services, a first-visit date and contact details on ruled bands.
Installation
Overview
A pet-sitting request for Vue with Ark UI. A start-aligned header sits over a wide form laid on ruled bands, each with a + mark where its rule meets the page's rails. The first band is a row of pet cells on shared hairlines: each cell is one pet, with its species as four icon tiles (dog, cat, rabbit, bird), a name, an age in years and a switch for vaccinations. "Add another pet" adds a cell up to three, "Remove" takes one away, a polite line says what changed and focus stays where the visitor was working. The second band holds the services as checkboxes and the first visit in a date picker; the third holds the contact details and the submit button. Submitting checks every pet and 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 that lists the pets back. It's built from Segment Group, Number Input, Switch, Checkbox, Date Picker, Field, Input, Guides, Shine Button and Button, with your theme's tokens for every colour. For pet sitters, dog walkers, kennels and any form where a visitor describes one, two or three of something.
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 bookings inbox, a CRM or a form endpoint): pets, services, visit, name and email hold everything the visitor entered. The confirmation only repeats what was sent and promises no reply time.
How do the pet cards work?
Each pet is an object with its own id, so adding and removing never shuffles what's typed in the others. MAX_PETS sets the limit (three), and from lg the row always shows three slots: the pets, the "Add another pet" cell, then empty ones, so a cell keeps its width as pets come and go. "Remove" appears once there is more than one pet, is named for its card ("Remove pet 2"), and focus moves to "Add another pet"; adding a pet moves focus to the new card's name field. A polite status line says "Pet 2 added. 2 pets." for screen readers.
How does the form check what's entered?
The form has noValidate, so the block shows its own messages. On submit, problems checks each pet (a species, a name, an age from 0 to 30), at least one service, a first-visit day, your name and an email with an @ and a domain. Each problem appears under its field with an icon, the control gets aria-invalid and an aria-describedby that points to the message, and focus moves to the first one in reading order, which can be a pet's species. Editing a field clears its message.
How do I change the services?
Edit SERVICES at the top of the file: each has a value, a label and a one-line detail. Each checkbox is named by its label and described by its detail. A checked box is drawn in the foreground colour, so the Shine Button stays the only primary control.
Each checkbox takes aria-labelledby and aria-describedby, because Ark puts the checkbox role on a label that an outer label can't name.
Which first-visit days can be picked?
Any day from today on. The picker reads the clock when the calendar opens, so it never shows a stale month, and the visitor can also type a date. To close days (Sundays, bank holidays) edit past.
How does it fit on a phone?
Below lg the cells stack one under the other, each full width, followed by "Add another pet". The services go two columns from sm and one below it, the contact fields stack, and the submit button goes full width. Nothing scrolls sideways at 320 pixels. The header and the form fade up once on load; with reduced motion they simply appear.