shadcn.io is not affiliated with official shadcn/ui
Bulk Calculator Gifting Contact Block for Svelte
A bulk gifting enquiry with a recipients stepper and a row of gift prices, a bill worked out right under them in three cells (gifts, volume discount, total) and a ladder that shows the next discount step.
Installation
Overview
A bulk gifting section for Svelte with Ark UI, a centred header over a plain form with no frame. A picker row sets how many people get a gift in a number input with steppers, and what each gift costs ($25, $50, $100 or $250) as a row of choices. Right under it, three cells set apart, each with its own lines and + marks, work out the bill: the gifts as "20 × $50", the volume discount step reached ("10% off from 50") and the total, written in one left-to-right run and labelled "Example only". A ladder of four steps marks the ones you have reached, and a polite line says how many more gifts reach the next one. Then an occasion in a select, a name and a work email. Submitting checks the fields, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid enquiry turns into a confirmation in the same space that repeats the order and the example total. It's built from Number Input, Segment Group, Select, Field, Input, Guides, Shine Button and Button, with CSS transitions for the entrances and your theme's tokens for every colour. For shops that sell gifts to companies.
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 a call to your gifting desk's inbox or CRM: details holds the number of people, the price of each gift, the occasion, the name and the email. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
How is the total worked out?
billOf multiplies the people by the price, finds the discount step they reach in STEPS (5% from 25 gifts, 10% from 50, 15% from 100, 20% from 250) and takes it off, rounding to whole dollars. Money is formatted with a fixed Intl.NumberFormat and sits in a left-to-right run, so the digits never reorder in a right-to-left page. The total is labelled "Example only", and a quiet line says delivery and tax aren't included. Replace STEPS and PRICES with your own terms.
What does the ladder under the bill do?
It lists the four steps, with a check on every step you have reached (screen readers hear "reached"). A polite line beside it says how many more gifts reach the next step ("5 more gifts for 15% off") or that you are at the top. The line keeps its height, so the form never jumps.
What does the people stepper accept?
A whole number from 1 to 5,000, with thousands separators allowed. The plus and minus buttons and the arrow keys change it by one. An empty, zero or larger number shows "Enter from 1 to 5,000 people." under the field and moves focus there on submit; the bill reads zero until the number is valid.