# Sources

Where an answer got what it says, as a card index. A citation is a small numbered tab printed after the sentence it supports; resting on it hangs a card with the source’s title, its site and a quoted line. At the foot of the answer, the sources are a references plate that opens to a numbered list.

Kit part · With the Kit · https://tactileui.dev/parts/sources

> The code and styling for this part 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

A cite is a tab, not a key. It sits a little above the baseline, after the full stop’s sentence, and darkens a step under the pointer.

## Variants

- A cite in a sentence
- Its card
- The plate · closed
- The plate · open, one not reachable
- In a chat slip

## States

- Rest
- Hover
- Focus
- Visited
- Not reachable

## Props and options

| Name | Kind | Description |
| - | - | - |
| data-unreachable | attribute | A source the model cited but could not load: no link, “Not reachable” beside the site. |
| wireSources(root) | function | Names each cite from its row (“Source 2: Refunds and credits, handbook.lode.dev”) and hangs its card. Idempotent. |
| domainOf(url) | function | The site as printed: www. dropped, lower case; a bad URL comes back trimmed, never a throw. |
| printer.cite(n) · printer.sources(list) | method | Cite and list sources while an answer streams in a chat. |

## Usage notes

Rest on a numbered tab, or Tab to it, to see its source. Press it to jump to the row in the list; “Back to the answer” brings you back. Escape puts a card away.

## Accessibility

- A cite is a real link, named “Source 2: Refunds and credits, handbook.lode.dev”, so a screen reader hears what it points to, not just a number.
- Following a cite opens the plate and moves focus to its row; the row’s “Back to the answer” link returns focus to the cite.
- The card only repeats what the row says, so nothing is lost when it does not show: on touch it never opens and a tap follows the link.
- Focus hangs the card at once and Escape puts it away without moving focus.
- The list is an ordered list, so the numbers are announced once, by the list, and the printed tabs are hidden from assistive technology.
- Under reduced motion the card appears without travel and the jump to a row does not scroll smoothly.

## Related parts

- [Hover card](https://tactileui.dev/parts/hover-card): A preview that hangs from a link when the pointer rests on it or the keyboard reaches it. The popover’s card and leader, opened by a short delay and put away by leaving.
- [Chat](https://tactileui.dev/parts/chat): An AI chat as a teleprinter, with restraint: what you type sits in a recess; the answer prints on a perforated slip with an amber lamp at the print head; code comes up on display glass. Composer with attachments and a send key that becomes Stop.
- [Link](https://tactileui.dev/parts/link): Printed type that goes somewhere. The words stay in ink and the rule under them is engraved into the plate: cut darker when you hover, deeper when you press.