KQ-623 · ORDER/TICKET

Order Ticket

An order ticket whose side toggle carries one knob across the card on glide — a layout-scale move rather than a switch flipping in place — while a size slider tracks the pointer one to one and is drawn to the nearest detent on snap, the only overshoot in the ticket. The estimated cost rolls its digits on the same spring, and submitting is a track: the thumb lands on flick past 85 percent of the travel and springs back on snap when it is released short. The side takes Left and Right, the slider takes Arrows and PageUp/PageDown for the next detent, and the track takes ArrowRight, End and then Enter.

KQ-623 · ORDER/TICKET

BSN/USD$24.18

Size50%

Estimated cost99.67 BSN

Slide to buy

Buying power $4,820.00

buy 50% · 99.67 BSN · Est $2,410.00 · Ready

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/order-ticket

Props

symbol: string; default "BSN/USD"; The instrument the ticket is for.
price: number; default —; The working price the estimate is built from.
buyingPower: number; default —; What 100 percent on the size slider is worth.
side / defaultSide: "buy" | "sell"; default "buy"; Controlled or initial side; the knob glides between the two stops.
onSideChange: (side: "buy" | "sell") => void; default —; Fires from the press or key that changed the side.
sizePercent / defaultSizePercent: number; default 25; Controlled or initial size as a percentage of buying power.
onSizePercentChange: (percent: number) => void; default —; Fires from the pointer or key that moved the slider, and from the detent settle.
detents: number[]; default [25, 50, 75, 100]; Percentages the thumb is drawn to; also the quick-size buttons under the track.
snapWithin: number; default 6; How near a detent a release must land, in percent, to be pulled in.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Turns money into its printed string. The default pins an explicit locale so server and client agree.
unitLabel: string; default "BSN"; Unit for the estimated quantity.
onSubmit: (order: SubmittedOrder) => void; default —; Fires once from the gesture or key that completed the submit track, with the side, percent, amount and units.
submittedFor: number; default 2200; Milliseconds the track holds its sent state before re-arming; 0 holds it.
disabled: boolean; default false; Locks the toggle, the slider and the track.

Prop	Type	Default	Description
symbol	string	"BSN/USD"	The instrument the ticket is for.
price	number	—	The working price the estimate is built from.
buyingPower	number	—	What 100 percent on the size slider is worth.
side / defaultSide	"buy" \| "sell"	"buy"	Controlled or initial side; the knob glides between the two stops.
onSideChange	(side: "buy" \| "sell") => void	—	Fires from the press or key that changed the side.
sizePercent / defaultSizePercent	number	25	Controlled or initial size as a percentage of buying power.
onSizePercentChange	(percent: number) => void	—	Fires from the pointer or key that moved the slider, and from the detent settle.
detents	number[]	[25, 50, 75, 100]	Percentages the thumb is drawn to; also the quick-size buttons under the track.
snapWithin	number	6	How near a detent a release must land, in percent, to be pulled in.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Turns money into its printed string. The default pins an explicit locale so server and client agree.
unitLabel	string	"BSN"	Unit for the estimated quantity.
onSubmit	(order: SubmittedOrder) => void	—	Fires once from the gesture or key that completed the submit track, with the side, percent, amount and units.
submittedFor	number	2200	Milliseconds the track holds its sent state before re-arming; 0 holds it.
disabled	boolean	false	Locks the toggle, the slider and the track.