Basic
Add data-bs-toggle="number-input" to the input; the plugin renders the box and the buttons, min and max set the bounds.
At a bound
The button at min or max goes disabled, so the user sees the value cannot go further.
Step and precision
A fractional step sets how many decimals the value keeps.
Sizes
Add .form-control-sm or .form-control-lg to the input; the box gets .number-input-sm or -lg.
Without bounds
Without min and max the value goes both ways, so a minus sign can be typed too.
Native number input
Use type="number" to keep the browser's own validation; the number input only hides its spin buttons.
No repeat
Add data-bs-repeat="false" to step once per click instead of repeating while the button is held.
Wider input
Set --tblr-number-input-input-width on the input for longer values.
Disabled and readonly
Add disabled or readonly to the input; both buttons follow.
Validation
Add .is-valid or .is-invalid to the input, like on any .form-control; the feedback text after it still shows.
Custom buttons
Write the .number-input markup yourself to change the icons or labels; data-bs-number-input-action marks the buttons.
With a label and hint
A number input sits in a FormGroup like any other control.
In a cart
The usual place for a number input: a quantity per line, with max set to the stock.
| Product | Price | Quantity | |
|---|---|---|---|
|
Hex nut M8 DIN 934, zinc plated
8-934-8-ZN
|
$12.40 | ||
|
Lock nut M8 DIN 985, stainless A2
8-985-A2
|
$28.90 | ||
|
Cap nut M8 DIN 1587, brass
8-1587-MS
|
$41.00 |