# Answer Desk

An FAQ section made as a help desk: a search field in a recessed well with an LCD that counts the answers that match, topic keys with a lamp for the chosen one, the questions as numbered rows with your words marked, and the answer on a reading panel that asks whether it helped.

Block · With a Pass · https://tactileui.dev/blocks/answer-desk

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Search as you type all words, Accent folded matching, Marked matches without html, Lcd match count, Topic radio tray with counts, Answer panel beside or under, Rows by arrow keys, Rate the answer, Hand off to a person, Container query layout, Concentric radii, Finish following

## Usage notes

The help or FAQ section of a product with more questions than a page reads well: support pages, pricing pages, docs landings. Where the FAQ Drawer is a card index you pull one question out of, this is a desk you search. Two words typed narrow the list as you go, every topic key shows its count for them and an LCD shows how many answers match; the answer opens on a panel beside the list, or right under its question on a phone. Yes and No keys ask whether it helped (ans-rate), and a contrast key hands the words searched to a person (ans-ask). Native radios for topics, buttons for questions, a polite live count, arrow keys between field and rows. CSS and a little DOM, no dependency, every finish of the kit.

## Options

| Option | Type | Description |
| - | - | - |
| label | text | Label |
| title | text | Heading |
| lead | text | Lead |
| topic | enum | Topic at start |
| chosen | enum | A01 to A12, in the order of the list. |
| query | text | Words already in the field; search() sets it from outside. |
| rate | boolean | Yes and No keys under each answer; fires ans-rate. |
| ask | text | Empty leaves out the foot. Fires ans-ask with the words searched. |
| askNote | text | Beside the key |
| finish | enum | Auto takes the page’s own finish tokens if it has them, then its data-finish, then the visitor’s system. |

## Methods

- select
- search
- update
- destroy

## States

1. **At rest**: The heading, then the desk. Nothing runs.
2. **Typing**: 
3. **Nothing matches**: The list says “Nothing here matches …” and offers Clear the search.
4. **Topic chosen**: Its key stands raised in the tray with its lamp lit; the list narrows to it.
5. **Answer opened**: A click or Enter on a row puts it in the recessed panel and marks the row as pressed in.
6. **Rated**: 
7. **Keyboard**: Down from the field steps into the rows; Up and Down, Home and End move between them; Up from the first goes back to the field; Esc in the field clears it.
8. **Tablet and phone**: 
9. **Reduced motion**: Keys change without transitions; nothing else moves.
10. **Finishes**: On a page with the kit's finish tokens it is drawn from them, in any of the twelve; otherwise aluminium or graphite by data-finish, tone or system.

## How it works

Original composition. The product (Plover, an invoicing app), its plans, prices, places and every question and answer are sample copy for an invented product, and the preview says so. The desk, keys, LCD and lamp are CSS drawn here, in the kit's tokens; no image.