All components (204)

Board

Data · Board · .amset-board

What it is and when to use it

A kanban-style board: columns of cards that move from one to another (pending, in progress, in review, done). It moves by dragging and with the keyboard, which is the half that almost every board lacks.

When to use it

For work that moves through phases and is shared out in plain sight: the workshop's jobs, the shop's tasks.
limit on a column for the amount of work it accepts at once: going over it warns with text ("Over the limit"), it does not block.
Board is controlled: it receives columns and reports through onMove, with the whole board already moved and the movement (key, target, position). BoardInner keeps the order internally (it starts from initial), for a demo or a panel; with onMove (optional) it reports every movement all the same, so you can save it without having to keep the state.

When not to

To reorder a single list: SortableList.
To share items between two lists (permissions, categories): TransferList.
For the status of a single process: Steps.

Keyboard: the first card of each column is a Tab stop; from there, the Up Arrow and Down Arrow keys go through the cards of the column, Left Arrow and Right Arrow move to the neighboring column (to the same position or to the last one), and Home and End go to the first and the last card. With a card focused, Control (or Cmd) and the arrow keys move it: left and right change its column, up and down change its position. The focus goes with the card. At the edge it does not move and focus is not lost.

Accessibility: it is a section with a required name (label) and each column is named by its title and its count ("In progress, 2 cards"). After every movement it announces where the card has landed ("Polish the Luna necklace, to In review, position 2 of 2"): without the position and the total, moving with the keyboard is blind. The help line at the top explains the keys, and the dotted grip is a drawing, not a button.

Fine-tuning: CSS variables --amset-board-*: -card-padding, -column, -description, -detail, -gap, -name, -padding, -radius, -title. The size changes the column width (12, 15 or 18 rem), the card padding and the font sizes.

What it looks like

Drag the cards or, with one focused, move it with Control and the arrow keys.

Review the contract

Call the supplierBefore Friday

Set up the shop window

No cards

<Board
  label="Sprint tasks"
  columns={columnas}
  onMove={setColumnas}
/>

Props

Import it with import { Board } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`columns`required	`readonly BoardColumn[]`	—
`label`required	`string`	What the board is about. Required: it names the whole region.
`onMove`required	`(columns: readonly BoardColumn[], move: BoardMove) => void`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`empty`	`string`	—
`hint`	`string`	The instructions line. Change it if your app uses other keys.
`size`	`"sm" \| "md" \| "lg"`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-board-column`	`15rem`
`--amset-board-gap`	`var(--amset-space-3)`
`--amset-board-padding`	`var(--amset-space-3)`
`--amset-board-card-padding`	`var(--amset-space-2) var(--amset-space-3)`
`--amset-board-radius`	`var(--amset-radius)`
`--amset-board-title`	`var(--amset-text-sm)`
`--amset-board-name`	`var(--amset-text-base)`
`--amset-board-description`	`var(--amset-text-sm)`
`--amset-board-detail`	`var(--amset-text-xs)`

How to change it

.amset-board {
  --amset-board-column: ...;
  --amset-board-gap: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: