Case Quantity Number Input Form Block for React

Edit the constants at the top: CASE (bottles in a case), MIN and MAX (the fewest and the most an order takes, in bottles) and CASE_CENTS (the price of a case in cents). settle is the rule for a typed number and stepFrom the rule for a button or key; both are pure functions, so the snapping, the notes and the total all follow from the same constants.

Nothing happens while you type. Leaving the field rounds it up to the next whole case and says so in the foot ("Rounded up to 2 cases"); a number under 6 is raised to 6 and one over 120 is capped, each with its reason. The total under the divider follows the number as it will settle, so you see 12 bottles at once. Pressing Add to order with a number that still needs snapping settles it the same way and adds the settled quantity, which is the one the total already shows.

Arrow Up and Arrow Down move one case and Page Up and Page Down five, in all four versions: the block takes those keys before the field sees them, so the library's own stepping never runs. The side buttons step one case and stay focusable at either end, where pressing one says the number is already at the limit. The field is a text box, since the stepping is the block's own.

The price is held in whole cents (2700 a case), multiplied by the number of cases and formatted once with Intl.NumberFormat, so there is no floating point to round. A page in Arabic prints Arabic-Indic digits in the field on some versions; asciiDigits reads them back as ASCII before the number is parsed, and the amounts and the sentence keep their left-to-right order inside a right-to-left page.

Nothing is ordered: Add to order says so in the foot. To make it real, send the settled number of bottles from the submit handler, price it on your server (never trust the total on the page) and show the server's answer in the same status line. If stock or the case size depends on the customer, pass them in as props and change MAX and CASE_CENTS from them.

Store the settled number of bottles as the form's value and leave the typed text in the block, because the rounding happens on leaving the field. With react-hook-form, use Controller, call field.onChange with the settled number from the blur handler and keep settle as the rule in a resolver. With TanStack Form, validate with onBlur and set the value with field.handleChange after settle.