# Shop back office · Counter The back office of a small shop, on a Quiet page: orders to pack and how long the oldest has waited, takings today and this week against last week that add up to the orders beneath them, a table of orders you can search, filter by status, channel and date, sort and tick, with a bar that packs, prints slips or exports the ticked ones, and a side panel for one order with its items, address and history, a tracking number to mark it sent and a refund that asks first. Stock shows each product on a meter with a lamp and the word Low or Out, a count you change in place and a Reorder key with a menu. Settings hold the shop name, currency, low-stock threshold and opening hours. On a phone it becomes a tab bar, cards and a bottom sheet. Loading, empty, error and paused states included. Template · With the Kit · https://tactileui.dev/templates/counter > The code and styling for this template come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing ## Anatomy - [Bar](https://tactileui.dev/parts/bar): The top of a page: a wordmark with a lamp, printed links, and one contrast key at most. - [Panel](https://tactileui.dev/parts/panel): A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels. - [Readout](https://tactileui.dev/parts/readout): A printed label over a value: key figures, with the unit small and the change in words. - [Data table](https://tactileui.dev/parts/data-table): The kit’s table with the tools a working one needs: headers that sort, a filter well, a check key on every row with one in the header that selects them all and sinks half way when only some are chosen, and a header that stays at the top while the rows scroll under it. While rows are chosen a plate slides out of a slot under the tools, its lamp lit, carrying what can be done to them. Without the script it is the plain table. - [Table toolbar](https://tactileui.dev/parts/table-toolbar): The strip over a table: a search well, filter keys that latch, a menu to choose which columns show, and the count of rows in view (“8 of 8 bookings”). It drives a data table or a data grid through the methods and events they share, so the table and its toolbar stay two parts. It tells the page about every change too, for a table that asks a server. - [Bulk bar](https://tactileui.dev/parts/bulk-bar): The bar that slides up when rows are checked. It says how many are chosen, offers the actions that apply to all of them (Archive, Assign, Delete) and a Clear key, and goes away again when none are. It follows a data table through the table’s own selection event, so the two share nothing but an id. The slide is a transform and nothing else, and under reduced motion the bar simply appears. - [Date field](https://tactileui.dev/parts/date-field): A date typed in three segments, day, month and year, in the field’s own well. Each segment is a small number you can step with the arrow keys or type over, and typing moves you on by itself once a number is complete. The order and the separator are the reader’s. A calendar key at the right of the well opens the kit’s calendar for anyone who would rather point. The form gets an ISO date, yyyy-mm-dd, or nothing while the date is not complete, and a wrong date says what is wrong in a sentence: February has 28 days in 2026. - [Search field](https://tactileui.dev/parts/search-field): A recess for a question. A glass is printed on its floor at the start, the words run on, an optional count is printed behind an engraved line, and a clear key sits in the far corner while there is something to clear. Escape empties it. - [Select](https://tactileui.dev/parts/select): A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it. - [Tag](https://tactileui.dev/parts/tag): A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out. - [Status](https://tactileui.dev/parts/status): A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance. - [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words. - [List](https://tactileui.dev/parts/list): Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip. - [Meter](https://tactileui.dev/parts/meter): A value inside a known range, read off an LED strip. The strip is a native meter element, so low, high and optimum are the browser’s own: the whole lit length takes the colour of where the value stands (green in the good region, amber next to it, red beyond), not the colour of the segment it has reached. The marks under the strip print where the regions begin, and cut lines across it show the same two places. Words say the state too. - [Inline edit](https://tactileui.dev/parts/inline-edit): A printed label that becomes a field when you press it. At rest it is plain printing, so a page of them reads as text; under the pointer an outline and a pencil say it can be changed. Pressed, it is let into the plate as the field, in the same type, so the words stay where they were. Enter prints the new words back and Escape puts the old ones back. - [Split button](https://tactileui.dev/parts/split-button): An action and the menu of its other ways, as two keys in one outline: Save, and a narrow key beside it for Save as draft or Save and close. The wide key is a real button that does what its words say. The narrow one opens a menu. They share the outer corners and one hairline between them, and each goes down on its own. - [Menu](https://tactileui.dev/parts/menu): A card of actions and options that slides out from under its key. The key stays down while the card is out; an option that is on lights its lamp. - [Drawer](https://tactileui.dev/parts/drawer): A panel that slides in from any edge of the window, on the native dialog. A face plate bolted to the frame, with a machined grip let into its inner edge to pull it shut by. - [Bottom sheet](https://tactileui.dev/parts/bottom-sheet): A panel that rises from the bottom edge of the window, on the native dialog, for a short task that should not leave the page: add an expense, set some filters, pick an action. It stops at two heights, half and full. A grip in its top edge drags it, or steps it between the heights from the keyboard; dragged down from half it goes away. The key that saves stays in sight at half, and the content scrolls only when the sheet is full. On a phone it is the whole width; on a wide screen it is a card, centred, standing on the bottom edge. - [Timeline](https://tactileui.dev/parts/timeline): An event log like the roll of a chart recorder. The rail is engraved down the plate and each event is a tick stamped across it, with its time in tabular figures and its words beside it. A lamp on the rail is the only colour, and a marker for the present separates what has happened from what is still to come. - [Form validation](https://tactileui.dev/parts/validation): A form that says what is wrong, on the browser’s own checks. Press submit with something missing and each field in error gets a line under it with a red lamp lit and words that say how to put it right, its well ringed red; at the top of the form an annunciator lights over a count and a list that links to each field, and takes the focus. From then on each field is checked again as it changes. - [Money field](https://tactileui.dev/parts/money-field): An amount of money in the field’s well, with its currency printed on the floor at the left (the symbol and the code, or a native select when several are offered). - [Time field](https://tactileui.dev/parts/time-field): A time of day in the field’s well: hours, minutes and, on a 12 hour clock, AM or PM, each a segment you can type into or step with the arrow keys. A key at the right opens a plain list of times, every few minutes between the earliest and the latest you allow, with the current one in the middle. It posts “HH:MM” on the 24 hour clock whichever clock it shows, says what is wrong in words (empty, half typed, too early, too late, off the step), and works in a native form, with a label, help text, an error, a disabled state and a reset. - [Alert dialog](https://tactileui.dev/parts/alert-dialog): The dialog plate for a question that must be answered before an act that matters. A caution strip is set across its head with one lamp in it, red when the act cannot be undone and amber when it can. The question is the title, one sentence says what will happen, and a grave act can ask for its name to be typed first. - [Settings row](https://tactileui.dev/parts/settings-row): What a settings page is made of: a label, one sentence under it and the control at the end, ruled like the list with a hairline between rows and nothing else drawn. A row with a switch or a check is one label, so pressing anywhere on it turns the control; a row with a key, a select or a value is a plain box, so a press means what the key says. - [Switch](https://tactileui.dev/parts/switch): On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on. - [Segmented control](https://tactileui.dev/parts/segmented): A row of keys in a tray with one pressed down: pick a view, a range or a mode and it applies at once. It is the kit’s selector without the lamps, with sizes, a full-width row and icon segments. - [Avatar](https://tactileui.dev/parts/avatar): A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count. - [Alert](https://tactileui.dev/parts/alert): A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened. - [Empty state](https://tactileui.dev/parts/empty-state): What a view shows before it has anything: an empty tray with the outline of what goes in it printed on its floor, one sentence and one key. - [Skeleton](https://tactileui.dev/parts/skeleton): The shape of a page before its data arrives, drawn as the unprinted plate: blank engraved bars where the words will print. Nothing on it moves. One amber lamp beside “Loading” is the only sign of work. - [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed. - [Toast](https://tactileui.dev/parts/toast): A confirmation after an action. ## Usage notes Bar with the shop name, four places (Today, Orders, Stock, Settings) with a count on the ones that wait, and whether the shop is open · a tab bar on a phone · Today: three readouts (to pack, takings today, this week), the next five to pack with a Mark packed key each, the products low on stock with a lamp and a word, and a table of takings for each day, last week against this · Orders: selects for status and channel, two date fields, a table toolbar (search, Columns, count) over a data table with a check key on every row; a bulk bar rises with Mark packed, Print packing slips and Export CSV; a row opens a side panel (a bottom sheet on a phone) with items that add to the total, the address, a timeline, Mark packed or a tracking number field that validates, and a refund: a money field, a reason and an alert dialog that names the amount · Stock: a data table with an in-place count, a meter, a lamp and a word, and a split button, Reorder, with Reorder all low in its menu · Settings: shop name, currency, low-stock threshold, a switch and two time fields for each day, volume and finish · a key at the foot that shows the other states (?state=).