Order ticket

A React component in Beamline's Trading category.

Buy/sell order entry with limit, market and stop types, % of balance, inline validation and a live cost summary.

Use it for

Placing an order on a market.

Not for

Swaps with routing and slippage → build a swap form on the same fields.

Anatomy

side switch (Buy/Sell radiogroup, full-bleed header across the ticket's top edge; the ticket clips to its frame's corners; the chosen side is a solid in its market colour, a divider below)
type tabs (underline)
available balance
trigger field (stop)
price field with Last shortcut
market estimate well (market)
size field
share-of-balance keys (held key sits pressed in)
post-only / reduce-only (Checkbox)
summary (value, fee, total)
submit (Button lg, data-slot="button", filled with the side's colour)
result line (icon + words)

Variants

types: limit, market, stop

States

empty
invalid (red boundary through the field's role inputs, icon + words under the field)
ready
submitting (Button loading: spinner in front, width and focus kept)
accepted (✓ icon + the exchange's result; focus moves to Size)
rejected (! icon + the exchange's words; draft kept)
disabled submit (--pui-opacity-disabled, same in every look)
No submission handler: show a rejection message and preserve the draft; never report placement or a fill without a caller acknowledgment.

Keyboard

Native form: Tab order follows the layout, Enter submits
Side is a radiogroup and type a tablist, each one tab stop: arrow keys (mirrored in RTL), Home and End change the choice and move focus with it

Motion

The chosen side's solid is one slab that travels between Buy and Sell as matter (ui/lib/contour.ts) and changes colour with the side; the label takes the ink that reads on the slab once the slab is under it. The order type's underline travels to the type chosen. Hover arrives at 0ms and leaves over --pui-motion-out; the submit presses like Button.

Props

Prop	Type	Default	Description
`base / quote` (required)	`string`	—
`last` (required)	`number \| null`	—
`available` (required)	`{ quote, base }`	—
`tick / sizeStep / fee`	`number`	—
`side / defaultSide / onSideChange`	`'buy'\|'sell'`	—
`price / onPriceChange`	`string`	—
`onSubmit`	`(order) => void \| Promise<void>`	—	Resolve to acknowledge submission, reject to retain the draft and display an error; omitting the handler cannot produce success.
`classNames`	`typed part classes`	—	See visualContract.slots; existing handlers, accessibility and internal measurement refs are preserved.
`style`	`CSSProperties`	—	Visual root inline styles.
`ref`	`HTMLFormElement`	—	Native visual root/control reference, composed with internal refs when present.

Import

import { OrderTicket } from "@/components/order-ticket/order-ticket";

Get it

Order ticket is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent