Task board

Stable

A column per status, with cards moved by dragging, by keys on their grip or from a menu, and every move announced.

TaskBoard lays tasks out in six status columns and moves cards three ways: a mouse or pen drag with a drop line, the grip handle with Space and the arrows, or the “…” menu. It commits moves through the shared task store (actions.move), so each one gets a toast with Undo. TaskCard is the card on its own, with idle, selected, lifted and dragging states.

Updated Oct 13, 2026View source

board.tsx

1import { useState } from 'react'2import type { StatusId } from '@rchursin/product/data/sample'3import { CreateTaskDialog, DEFAULT_PREFS, labelIndex, TaskBoard, useTaskActions, useTaskState } from '@rchursin/product/tasks'4import { useToast } from '@rchursin/product/ui'5
6/**7 * The board on the shared task store (the same saved tasks as the Tasks app), so every move8 * gets a toast with Undo. Drag a card, use its grip with Space and the arrows, or its “…” menu.9 */10export default function TaskBoardExample() {11  const { tasks, labels } = useTaskState()12  const actions = useTaskActions()13  const toast = useToast()14  const [active, setActive] = useState<string | null>(null)15  const [selected, setSelected] = useState<ReadonlySet<string>>(() => new Set())16  const [createIn, setCreateIn] = useState<StatusId | null>(null)17  const now = new Date()18
19  function toggle(id: string) {20    const next = new Set(selected)

Usage

Import

import { DEFAULT_PREFS, TaskBoard, TaskCard, useTaskActions, useTaskState } from '@rchursin/product/tasks'

Use

1const { tasks } = useTaskState()2const actions = useTaskActions()3
4<TaskBoard5  tasks={tasks}6  actions={actions}7  now={new Date()}8  labelName={labelName}9  props={DEFAULT_PREFS.props}10  selected={selected}11  activeId={active}12  onActiveChange={setActive}13  onOpen={openTask}14  onSelect={toggleSelected}15  onCreateIn={(status) => openCreate({ status })}16  onDelete={(id) => actions.remove([id])}17/>

Examples

Card states

Idle (live: click it, or move it from its menu), selected, lifted by keyboard, and the copy that follows the pointer while dragging.

card.tsx

1import { useState } from 'react'2import { sampleTasks, statuses, type Task } from '@rchursin/product/data/sample'3import { DEFAULT_PREFS, labelIndex, TaskCard } from '@rchursin/product/tasks'4import { useToast } from '@rchursin/product/ui'5
6/** A fixed day, so the due dates read the same on every visit */7const NOW = new Date(2026, 9, 13, 9, 30)8const labels = labelIndex([])9
10/**11 * One card in four states. The first is live: click it to open, or move it with its “…” menu.12 * The others are pictures of what the board draws: `still` cards have no controls, and the13 * `preview` copy that follows the pointer is hidden from screen readers.14 */15export default function TaskCardStates() {16  const toast = useToast()17  const [tasks, setTasks] = useState(() => sampleTasks(NOW).filter((t) => ['RC-128', 'RC-122', 'RC-125', 'RC-118'].includes(t.id)))18  const [live, selected, lifted, preview] = tasks as [Task, Task, Task, Task]19
20  const moveLive = statuses

API

TaskBoard props

TaskBoard props
Prop	Type	Default	Description
`tasks`required	`Task[]`	–	The tasks to show, already filtered. There is a column for every status, in rank order.
`actions`required	`TaskActions`	–	From useTaskActions(). Moves are committed with actions.move, so the board works on the shared task store.
`now`required	`Date`	–	Due dates on the cards are relative to it.
`labelName`required	`(id: string) => string`	–	Turns a label id into its name.
`props`required	`Record<PropKey, boolean>`	–	Which properties the cards show.
`selected`required	`ReadonlySet<string>`	–	Selected task ids; selected cards say “Selected”.
`activeId`required	`string \| null`	–	The card holding the tab stop. null falls back to the first card.
`onActiveChange`required	`(id: string) => void`	–	Focus moved to another card.
`onOpen`required	`(id: string) => void`	–	Enter or a click on a card.
`onSelect`required	`(id: string, how: 'toggle' \| 'range') => void`	–	Shift+Space, ⌘/Ctrl-click (toggle) or Shift-click (range).
`onCreateIn`required	`(status: StatusId) => void`	–	The “+” in a column header.
`onDelete`required	`(id: string) => void`	–	Delete in a card’s menu.
`ref`	`Ref<ViewHandle>`	–	focusActive(), move(1 \| -1) and focusTask(id), for app-level keys.

TaskCard props

TaskCard props
Prop	Type	Default	Description
`task`required	`Task`	–	The task to draw.
`now`required	`Date`	–	For the due date.
`labelName`required	`(id: string) => string`	–	Turns a label id into its name.
`props`required	`Record<PropKey, boolean>`	–	Which properties to show.
`state`	`'idle' \| 'source' \| 'lifted' \| 'preview'`	`'idle'`	source: the original at 40% while dragging. lifted: picked up by keyboard. preview: the copy under the pointer (hidden from screen readers).
`selected`	`boolean`	–	Draws a ring and the word “Selected”.
`tabbable`	`boolean`	`true`	The card, grip and menu are in the Tab order only while this is true.
`onOpen`	`(id: string, e: MouseEvent) => void`	–	A click or Enter on the card.
`onCardKeyDown`	`(e: KeyboardEvent<HTMLButtonElement>, id: string) => void`	–	Keys on the card (the board moves between cards with it).
`onHandleKeyDown`	`(e: KeyboardEvent<HTMLButtonElement>, id: string) => void`	–	Shows the grip handle and receives its keys.
`onHandleBlur`	`(id: string) => void`	–	The grip lost focus (the board cancels a keyboard move).
`onPointerDown`	`(e: PointerEvent<HTMLDivElement>, id: string) => void`	–	Starts a pointer drag.
`menuItems`	`MenuItem[]`	–	Shows the “…” menu with these items.
`dragHelpId`	`string`	–	id of the hidden drag instructions the grip is described by.
`still`	`boolean`	–	A picture with no controls.
`className`	`string`	–	Extra classes on the card.

Accessibility

Keyboard

Task board keyboard interactions
Key	What it does
`↓Down arrowJ`	On a card: the next card in the column.
`↑Up arrowK`	On a card: the previous card in the column.
`←Left arrow→Right arrow`	On a card: the card at the same height in the previous or next column (empty columns are skipped).
`HomeEnd`	On a card: the first or last card in the column.
`↵Enter`	On a card: open the task.
`⇧ShiftSpace`	On a card: select or deselect it.
`Tab`	From the card to its grip and its “…” menu, then on through the other columns’ “+” buttons and out of the board.
`Space↵Enter`	On the grip: pick the card up; press again to drop it.
`↑Up arrow↓Down arrow`	While lifted: move it up or down the column.
`←Left arrow→Right arrow`	While lifted: move it to the previous or next column.
`Ctrl↑Up arrowCtrl↓Down arrow`	While lifted: move it to the top or bottom of the column.
`Esc`	Cancel the move and put the card back. Tabbing away cancels too, and Esc also cancels a mouse drag.

The board is a group named “Board”. Each column is a group named by its <h3>, with a count read as “3 tasks”.
Each card is a button named “RC-128, Fix test-fixer…” and described by its priority, due date, labels, estimate and assignee.
The grip has aria-roledescription="draggable", aria-pressed while lifted, and hidden instructions as its description.
Every step is announced: “Picked up RC-128, Fix test-fixer. In progress, position 1 of 2.”, “Over In review, position 1 of 2.”, then “RC-128 moved from In progress to In review, position 1 of 2.” or “Move cancelled.”
Dragging is never the only way: the menu moves a card with single presses (WCAG 2.5.7), and touch scrolls the board instead of grabbing a card.
Focus follows a card into its new column after a keyboard or menu move.

Guidelines

Do

Keep the “…” menu: it is how people move a card without dragging.
Give the board a fixed height. Columns scroll on their own, and the board scrolls sideways.
Pass the filtered tasks: a move among visible cards still lands in the right place in the full column.

Don’t

Don’t use TaskBoard without the shared store; it commits moves through actions.move and reads the full columns from taskStore.
Don’t hide the grip from the keyboard. It only fades out for the mouse until you hover or focus the card.

In use

Source

The component’s own files, exactly as they run on this site.

src/kit/product/tasks/TaskBoard.tsx

1/**2 * Board: one column per status. Three ways to move a card, all announced:3 *   1. Drag it with a mouse or pen (pointer events; a 2px drop line with a dot shows where it lands,4 *      the original stays at 40%; Esc cancels). Touch scrolls the board instead; use the menu.5 *   2. Keyboard: focus the grip, Space or Enter picks up, arrows move (⌘/Ctrl+↑↓ to the ends),6 *      Space or Enter drops, Esc cancels. Focus follows the card into its new column.7 *   3. The "…" menu: Move to <status>, Move to top, Move to bottom.8 * Between cards: ↑ ↓ (J K) within a column, ← → across columns, Enter opens. One Tab stop.9 */10import {11  useEffect,12  useId,13  useImperativeHandle,14  useLayoutEffect,15  useRef,16  useState,17  type FocusEvent,18  type KeyboardEvent,19  type MouseEvent,20  type PointerEvent,

1import { useState } from 'react'2import type { StatusId } from '@rchursin/product/data/sample'3import { CreateTaskDialog, DEFAULT_PREFS, labelIndex, TaskBoard, useTaskActions, useTaskState } from '@rchursin/product/tasks'4import { useToast } from '@rchursin/product/ui'5 6/**7 * The board on the shared task store (the same saved tasks as the Tasks app), so every move8 * gets a toast with Undo. Drag a card, use its grip with Space and the arrows, or its “…” menu.9 */10export default function TaskBoardExample() {11 const { tasks, labels } = useTaskState()12 const actions = useTaskActions()13 const toast = useToast()14 const [active, setActive] = useState<string | null>(null)15 const [selected, setSelected] = useState<ReadonlySet<string>>(() => new Set())16 const [createIn, setCreateIn] = useState<StatusId | null>(null)17 const now = new Date()18 19 function toggle(id: string) {20 const next = new Set(selected)

1const { tasks } = useTaskState()2const actions = useTaskActions()3 4<TaskBoard5 tasks={tasks}6 actions={actions}7 now={new Date()}8 labelName={labelName}9 props={DEFAULT_PREFS.props}10 selected={selected}11 activeId={active}12 onActiveChange={setActive}13 onOpen={openTask}14 onSelect={toggleSelected}15 onCreateIn={(status) => openCreate({ status })}16 onDelete={(id) => actions.remove([id])}17/>

1import { useState } from 'react'2import { sampleTasks, statuses, type Task } from '@rchursin/product/data/sample'3import { DEFAULT_PREFS, labelIndex, TaskCard } from '@rchursin/product/tasks'4import { useToast } from '@rchursin/product/ui'5 6/** A fixed day, so the due dates read the same on every visit */7const NOW = new Date(2026, 9, 13, 9, 30)8const labels = labelIndex([])9 10/**11 * One card in four states. The first is live: click it to open, or move it with its “…” menu.12 * The others are pictures of what the board draws: `still` cards have no controls, and the13 * `preview` copy that follows the pointer is hidden from screen readers.14 */15export default function TaskCardStates() {16 const toast = useToast()17 const [tasks, setTasks] = useState(() => sampleTasks(NOW).filter((t) => ['RC-128', 'RC-122', 'RC-125', 'RC-118'].includes(t.id)))18 const [live, selected, lifted, preview] = tasks as [Task, Task, Task, Task]19 20 const moveLive = statuses

Prop

Type

Default

Description

tasksrequired

Task[]

–

The tasks to show, already filtered. There is a column for every status, in rank order.

actionsrequired

TaskActions

–

From useTaskActions(). Moves are committed with actions.move, so the board works on the shared task store.

nowrequired

Date

–

Due dates on the cards are relative to it.

labelNamerequired

(id: string) => string

–

Turns a label id into its name.

propsrequired

Record<PropKey, boolean>

–

Which properties the cards show.

selectedrequired

ReadonlySet<string>

–

Selected task ids; selected cards say “Selected”.

activeIdrequired

string | null

–

The card holding the tab stop. null falls back to the first card.

onActiveChangerequired

(id: string) => void

–

Focus moved to another card.

onOpenrequired

(id: string) => void

–

Enter or a click on a card.

onSelectrequired

(id: string, how: 'toggle' | 'range') => void

–

Shift+Space, ⌘/Ctrl-click (toggle) or Shift-click (range).

onCreateInrequired

(status: StatusId) => void

–

The “+” in a column header.

onDeleterequired

(id: string) => void

–

Delete in a card’s menu.

ref

Ref<ViewHandle>

–

focusActive(), move(1 | -1) and focusTask(id), for app-level keys.

Prop

Type

Default

Description

taskrequired

Task

–

The task to draw.

nowrequired

Date

–

For the due date.

labelNamerequired

(id: string) => string

–

Turns a label id into its name.

propsrequired

Record<PropKey, boolean>

–

Which properties to show.

state

'idle' | 'source' | 'lifted' | 'preview'

'idle'

source: the original at 40% while dragging. lifted: picked up by keyboard. preview: the copy under the pointer (hidden from screen readers).

selected

boolean

–

Draws a ring and the word “Selected”.

tabbable

boolean

true

The card, grip and menu are in the Tab order only while this is true.

onOpen

(id: string, e: MouseEvent) => void

–

A click or Enter on the card.

onCardKeyDown

(e: KeyboardEvent<HTMLButtonElement>, id: string) => void

–

Keys on the card (the board moves between cards with it).

onHandleKeyDown

(e: KeyboardEvent<HTMLButtonElement>, id: string) => void

–

Shows the grip handle and receives its keys.

onHandleBlur

(id: string) => void

–

The grip lost focus (the board cancels a keyboard move).

onPointerDown

(e: PointerEvent<HTMLDivElement>, id: string) => void

–

Starts a pointer drag.

menuItems

MenuItem[]

–

Shows the “…” menu with these items.

dragHelpId

string

–

id of the hidden drag instructions the grip is described by.

still

boolean

–

A picture with no controls.

className

string

–

Extra classes on the card.

Key

What it does

↓Down arrowJ

On a card: the next card in the column.

↑Up arrowK

On a card: the previous card in the column.

←Left arrow→Right arrow

On a card: the card at the same height in the previous or next column (empty columns are skipped).

HomeEnd

On a card: the first or last card in the column.

↵Enter

On a card: open the task.

⇧ShiftSpace

On a card: select or deselect it.

Tab

From the card to its grip and its “…” menu, then on through the other columns’ “+” buttons and out of the board.

Space↵Enter

On the grip: pick the card up; press again to drop it.

↑Up arrow↓Down arrow

While lifted: move it up or down the column.

←Left arrow→Right arrow

While lifted: move it to the previous or next column.

Ctrl↑Up arrowCtrl↓Down arrow

While lifted: move it to the top or bottom of the column.

Esc

Cancel the move and put the card back. Tabbing away cancels too, and Esc also cancels a mouse drag.

1/**2 * Board: one column per status. Three ways to move a card, all announced:3 * 1. Drag it with a mouse or pen (pointer events; a 2px drop line with a dot shows where it lands,4 * the original stays at 40%; Esc cancels). Touch scrolls the board instead; use the menu.5 * 2. Keyboard: focus the grip, Space or Enter picks up, arrows move (⌘/Ctrl+↑↓ to the ends),6 * Space or Enter drops, Esc cancels. Focus follows the card into its new column.7 * 3. The "…" menu: Move to <status>, Move to top, Move to bottom.8 * Between cards: ↑ ↓ (J K) within a column, ← → across columns, Enter opens. One Tab stop.9 */10import {11 useEffect,12 useId,13 useImperativeHandle,14 useLayoutEffect,15 useRef,16 useState,17 type FocusEvent,18 type KeyboardEvent,19 type MouseEvent,20 type PointerEvent,

Task board

Usage

Examples

Card states

API

TaskBoard props

TaskCard props

Accessibility

Keyboard

Guidelines

Do

Don’t

In use

Related

Source

Browse the Library

Task board

Usage

Examples

Card states

API

TaskBoard props

TaskCard props

Accessibility

Keyboard

Guidelines

Do

Don’t

In use

Related

Source

Browse the Library

On the shared store

Usage

Examples

Card states

API

TaskBoard props

TaskCard props

Accessibility

Keyboard

Guidelines

Do

Don’t

In use

Related

Source

On the shared store

Usage

Examples

Card states

API

TaskBoard props

TaskCard props

Accessibility

Keyboard

Guidelines

Do

Don’t

In use

Related

Source