shadcn.io is not affiliated with official shadcn/ui
Tax Rate Settings Block for Svelte
A tax rate panel with a rate field and a switch for each place a shop sells to, an include-tax setting and a worked example that prices a 100.00 item with the tax added or taken out.
Installation
Overview
Show what a tax rate does to a price while it is being set, with this tax rate panel for Svelte with Ark UI. Inside a hairline frame with a plus mark on each corner, a switch decides whether the prices in the shop already include tax. A native table lists the four places the shop sells to (Texas, Germany, the United Kingdom and Ontario) with the name of the tax there, a rate in a Number Input and a Switch to charge it or not. Beside the table a worked example prices a 100.00 item in the place you choose with a Native Select, in that place's own currency: with tax on top it reads "108.25 at checkout, 8.25 of it sales tax", with tax included it reads "100.00 includes 7.62 of tax, leaving 92.38". It moves as soon as a rate, a switch or the inclusive setting changes. A blank rate is refused when you save. The last band counts unsaved changes in a status line beside a Shine Button to save them and an outline Button to discard them. On a phone each place becomes a card and the save bar stays pinned to the bottom of the screen. It's built from Number Input, Switch, Native Select, Button, Shine Button and Guides, with a CSS entrance only. For a store, marketplace or invoicing product, or any setting where a percentage should show its effect in money.
FAQ
How do I add a place or change a rate?
Edit the constants at the top. REGIONS lists the places with their country, the name of the tax and the currency of the worked example, and SAVED holds each place's rate and whether it is on when the page opens. Add an entry to both and the table and the example menu follow. PRICE is the item the example prices, in cents.
How is the worked example calculated?
In whole cents, so there is no floating-point drift. With tax added, the tax is the price times the rate, rounded to the nearest cent, and the customer pays the sum. With tax included, the price before tax is the shown price divided by one plus the rate, rounded, and the tax is what is left of the shown price. A place that is switched off, or a rate of zero, adds nothing. Real tax law has more rules (rounding per line or per order, thresholds, exemptions), so treat this as the shape of the setting and check your own rules.
What is refused when I save?
A switched-on place with a blank rate. The status line names the place, the rate field is marked invalid and focus moves to it. A rate above 30 is brought back to 30 when you leave the field, and anything that is not a number is dropped. A place that is switched off keeps its rate and is not checked.
What happens when I press Save, and what stays local?
Nothing leaves the page and no tax is filed. The block keeps the saved rates and the ones being edited, and counts how many settings differ, so the status line can say "2 changes not saved yet." Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copy back and redraws the rate fields. To make it real, send the edited rates to your server in the save handler. Save and Discard are marked aria-disabled rather than disabled while nothing changed, so they keep their place and focus.
Is it a real table, and how does it look on a phone?
Yes, a native table with a caption, column heads and a row header for each place, so a screen reader reads the place, then the rate and the switch. Below the medium breakpoint the same markup becomes cards: the place at the start with its switch at the end and the rate field on its own line, and the save bar pinned to the bottom of the screen.