# 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.

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

> 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

Plain CSS grid rows with inset hairlines; a delegated module adds the two behaviours, so lists added later work without a call. Moving a row by keyboard moves its neighbour instead, so the focused grip never leaves the DOM and never loses the focus. The numbers are a CSS counter, so they follow the order with no script.

## Variants

- People · a key at the end
- Status · lamps with words
- Links · the whole row goes

## States

- Rest
- Hover
- Focus
- Chosen · lifted

## Props and options

| Name | Kind | Description |
| - | - | - |
| aria-selected | attribute | Chosen: the row sinks into a recess and its check key latches. |
| change | event | The choice changed. |
| Up · Down · Home · End | keyboard | Move the active row. |
| Space · Enter · Ctrl+A | keyboard | Choose (toggle when multiple) · choose all. |
| Space · arrows · Escape | keyboard | Lift · move · put back. Space again drops. |

## Usage notes

Choose takes with a click, or Tab in and use the arrows and Space. In the running order, press Space on a grip, move with the arrows, Space to drop, or drag the grip.

## Accessibility

- A plain list is a list: rows are read with their title, second line and fact, in order.
- Selectable lists follow the listbox pattern. The check key and the recess show it twice over.
- Reordering follows the grab-and-move model.
- Dragging is a second way to reorder, never the only one.

## Related parts

- [Table](https://tactileui.dev/parts/table): Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
- [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.
- [File tree](https://tactileui.dev/parts/file-tree): Folders and files as a real tree, printed like a wiring diagram: traces with an elbow into every item, chevrons that turn, and the chosen file set in a recess with its lamp lit. Written as a plain nested list.