# Appointment book · Diary The appointment book of a small physiotherapy practice, on a Quiet page: a day as a time grid with both practitioners side by side, free times you press to book, a Now line and the next appointment marked; a week that says how full each day is with a calendar to jump to a date; a booking form that offers only free times and refuses a clash in plain words; clients with their last and next visit; and settings for hours, appointment types and reminders. An appointment opens in a side panel, or a bottom sheet on a phone, and cancelling asks first, for a reason. Loading, empty, error and read-only states included. Template · With the Kit · https://tactileui.dev/templates/diary > 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. - [Banner](https://tactileui.dev/parts/banner): A strip the width of the page, above everything, for one announcement: a lamp, one line, an optional key that goes somewhere and a dismiss key. It is a raised plate, not a recess, so it reads as part of the frame and not as a message in the page. It is a labelled region, there on load, and says its thing once. When it goes it closes like a drawer, so the page glides up by its height instead of jumping. - [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. - [Calendar](https://tactileui.dev/parts/calendar): A month on a plate. The month and year sit on two drums behind a window and roll when you page; the chosen day is a latched cap, a range is a groove cut between two caps, and events are lamps named in the line below. - [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. - [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. - [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. - [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. - [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. - [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. - [Combobox](https://tactileui.dev/parts/combobox): A field that filters a long list as you type. It starts as a plain select, so it posts with the form and works without a script; then the options card slides out of a slot under the well, the letters that match print heavier and the chosen option’s lamp is lit. Several choices sit in the well as tags. - [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. - [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. - [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. - [Input group](https://tactileui.dev/parts/input-group): One recess that holds a field and everything that belongs to it. Words that are part of the value but are not typed, such as https:// or a currency, are printed on the floor of the well behind an engraved line; a glyph sits at the start; small keys sit at the end to clear the text, copy it, or show a password. - [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error. - [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. - [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. - [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. - [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 Banner that says SAMPLE DATA · Bar with the practice name, five places (Day, Week, Book, Clients, Settings) and one contrast key (Book appointment) · a tab bar on a phone · Day: four readouts (appointments, still to come, next appointment, fees), then a panel with a time grid from 08:00 to 18:00, a column a practitioner, an appointment a key, a free key every half hour, the hours outside opening shaded, and a Now line · an appointment in a drawer or sheet with its status in words, Arrived, Did not attend, Move on the time list and Cancel behind an alert dialog that asks for a reason, then its facts and a note · Week: a calendar and a row a day, each practitioner a meter with a state word · Book: a combobox of clients or New client, a selector for the practitioner, a select for the type, the date field and a select of free times, a plain clash message, and the booking shown once made · Clients: a search field over a list, then a client page with coming-up and past visits and a Book again key · Settings: rows for the practice name, reminder email, volume and finish, opening hours on the time field and a length and price for each appointment type · a key at the foot that shows the other states (?state=).