shadcn.io is not affiliated with official shadcn/ui
Care Hours Planner Contact Block for Svelte
A care-needs request where ticking kinds of help and setting their hours a week adds up a live weekly plan with a meter and a count of visits, on shared hairlines.
Installation
Overview
A care request for Svelte with Ark UI. A start-aligned header sits over two columns of cells on shared hairlines. At the start, who the care is for, a checklist of five kinds of help (bathing, meals, medication reminders, mobility, companionship) where each ticked line gets its own hours-a-week stepper, and your name and email. At the end, a live panel that adds the hours up as a big number, draws them against a 40-hour week with a meter, counts visits of two hours and lists all five lines, quiet when they aren't needed. On a phone the panel follows the checklist. It's built from Checkbox, Select, Progress, Field, Input, Guides, Shine Button and Button. Example only: nothing here is care advice.
FAQ
How is the plan worked out?
Each ticked kind of help has hours a week between 1 and 14, starting from a typical figure (bathing 3, meals 4, medication reminders 2, mobility 3, companionship 2). The panel sums them, draws the sum against a 40-hour week and shows the visits as the total divided by two hours, rounded up. Change NEEDS, WEEK and VISIT at the top of the file. It's a sum of what you chose, not an assessment.
Why doesn't the panel move when I tick things?
All five lines are always in the panel: a line that isn't needed reads "Not needed" in the quiet text colour instead of disappearing. The sentence under the number keeps a line of its own either way. A hidden status region present from the start tells a screen reader the new total after each change, such as "3 kinds of help, 9 hours a week, about 5 visits of 2 hours".
How do the hours steppers work?
Each row has a minus and a plus button with names such as "More hours of meals", and the hours between them. They stay at 1 and 14 instead of disabling themselves, so keyboard focus never drops. The stepper is invisible and inert until its box is ticked, and it keeps its space so the row doesn't resize.
Where does the request go?
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 coordinator's inbox: details holds who the care is for, the hours for each kind of help, the name and the email. The confirmation repeats them so a typo is easy to spot.
How is the who-for select labelled?
The label above it names the select's button for screen readers, and focus can land on it when the choice is missing. The field takes the select's id, so its label and the hidden native select share it.
How does it fit on a phone?
The three cells stack with a hairline between them: the checklist, then the panel, then your details and the button. Each checklist row keeps its box and words on one side and the stepper on the other, and at 320 pixels the words wrap rather than push the stepper off. The number and the phone link keep their digits in order in a right-to-left layout.