Scan flow

A React component in Beamline's Data & tables category.

A pick list that takes scans: each scan flies from the scan field into its row and fills that row's quantity ring, and the prompt moves to the next bin. A wrong item lands in the row it was taken for with Scanned against Expected and the words that differ marked (Oat milk 1 L against Oat milk 2 L), and the ring doesn't move until the right one is scanned; a scan past the count says one too many in its row; a code nobody knows says so under the field. Undo the last scan, set a count by hand, and finish early with the short lines kept in place.

Use it for

Picking an order, counting parts against a work order, receiving a delivery, checking a worklist: work done on a phone with a scanner or the camera, where a wrong item matters.
The host owns the lines and what happens on finish; codes come from a keyboard-wedge scanner typing into the field, or from a camera through scanRef.

Not for

A stock overview over time → stock-horizon or quantity-river.
A plain checklist without counts → checklist or task-list.

Anatomy

prompt: the label, the scan field (Scan or type a code), the last scan's answer under it (a wrong item, one too many or an unknown code in its tone), Next · Bin with the item's name and n of qty, Undo last scan
list: lines in pick-path order; a line: its quantity ring (a segment per unit up to twelve, then one arc; a check when picked), name, bin and detail, n of qty (tap to set by hand), the +1 of the last scan
comparison (in a line): Wrong item, Scanned and Expected with names, codes and the differing words marked, Put it back; or n of n already: one too many, Put one back
finish: Finish pick (Finish with N lines short while lines are short); after: Pick complete · N items, or Finished with N lines short with Short n on each short line and Keep picking

States

picking
next line
counted
picked line
wrong item
one too many
unknown code
setting by hand
finished complete
finished short

Keyboard

The scan field keeps focus between scans: a scanner types the code and Enter; Escape clears a typed code
Each line is a list item named by its item, count and bin; its count is a button that opens a stepper (Escape or Done returns to the field)
Put it back and Put one back are reachable with Tab and return to the field; every scan result is said once (a polite status)

Motion

A scan's chip grows out of the scan field and lands on its row (the shared FLIP), the ring fills one step; a comparison opens with a short shake and the lines under it slide. Nothing runs at rest; reduced motion places everything and drops the shake.

Props

Prop	Type	Default	Description
`label` (required)	`string`	—	What is being picked: "Order #4127".
`lines` (required)	`ScanLine[]`	—	In pick-path order.
`value`	`Record<string, number>`	—	Picked counts by line id.
`defaultValue`	`Record<string, number>`	—	Initial selection when uncontrolled; omitted by default.
`onValueChange`	`((picked: Record<string, number>) => void)`	—	Reports the selected value after a change; no callback by default.
`onScan`	`((code: string, result: ScanResult) => void)`	—	Every scan and what it was.
`onFinish`	`((picked: Record<string, number>, short: Record<string, number>) => void)`	—	Finish pick: the counts, what is short by line id (empty when all is picked), and the serials by line id.
`describe`	`((code: string) => { name: string; } \| null)`	—	Name a code that is not on the list, so a wrong item shows what was scanned ("Oat milk 1 L"); null: unknown.
`scanRef`	`Ref<ScanFlowHandle>`	—	A camera or another reader feeds codes through `scanRef.current.scan(code)`.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`classNames`	`Partial<Record<"root" \| "line" \| "list" \| "prompt" \| "finish", string>>`	—	Classes for the named visual parts; no overrides by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`serials`	`Record<string, string[]>`	—	The serials captured on serial lines, by line id, in the order scanned.
`defaultSerials`	`Record<string, string[]>`	—
`onSerialsChange`	`((serials: Record<string, string[]>) => void)`	—
`checkSerial`	`((serial: string, line: ScanLine) => string \| null)`	—	Refuse a serial from outside this flow, saying why ("Shipped on order #4090"); null takes it. A serial already on this list is refused without asking.
`groups`	`ScanGroup[]`	—	The orders or packages lines name in `group`.

Built from

Used in

Pack station

Dependencies

lucide-react

Import

import { ScanFlow } from "@beamline/scan-flow";

Get it

Scan flow is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Scan flowComplete system · $49

A pick list that takes scans.

Picking order #4127 in the stockroom

Mid-pick: 6 of 15 picked, the next stop is bin B-12. Tap a product on the shelf to scan it, or type its code and Enter: each scan flies into its row and fills its ring. Scan the 1 L oat milk and it lands in the 2 L row, the difference marked; a loose label is not on the list. Finish early and what is short stays in place.

0 × 0full

A van's part count for a work order

Fourteen filters draw one continuous ring; tap a count to set it by hand when a label is missing.

0 × 0full

Everything picked

Every ring full: Finish pick is the main action and says the items picked.

0 × 0full

Batch pick with serials, by order

Two orders in one pick, each under its own header with its progress. A headset or the dock asks for the unit's serial next; a serial already taken here, or SN-HS-0007 (shipped on another order), is refused and says why. The third headset goes to the order still short of one.

0 × 0full

About Scan flow

← Duplicate guard Pack planner →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Scan flow

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Used in

Dependencies

Import

Get it

More in Data & tables