Number Input
Numeric input with stepper buttons, decimal support, and model binding.
<rhx-number-input>
Examples
Basic
<rhx-number-input rhx-label="Quantity" name="quantity"
value="1" rhx-min="0" rhx-max="99" rhx-step="1" />Decimal Step
<rhx-number-input rhx-label="Price" name="price"
value="9.99" rhx-min="0" rhx-step="0.01" />No Steppers
<rhx-number-input rhx-label="Amount" name="amount"
value="100" rhx-no-steppers="true" />Sizes
<rhx-number-input rhx-label="Small" rhx-size="small"
name="num-sm" value="5" rhx-min="0" rhx-max="10" />
<rhx-number-input rhx-label="Medium" name="num-md"
value="5" rhx-min="0" rhx-max="10" />
<rhx-number-input rhx-label="Large" rhx-size="large"
name="num-lg" value="5" rhx-min="0" rhx-max="10" />States
<rhx-number-input rhx-label="Disabled" name="num-dis"
value="3" rhx-disabled="true" />htmx Integration
Total: $29.99 ($29.99/ea)
<rhx-number-input rhx-label="Quantity" name="quantity"
value="1" rhx-min="1" rhx-max="20" rhx-step="1"
hx-get="/Docs/Components/NumberInput?handler=Calculate"
hx-trigger="change"
hx-target="#calc-result"
hx-include="this" />
<div id="calc-result">Total: $29.99</div>Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-for |
ModelExpression |
- |
ASP.NET Core model expression for two-way binding |
name |
string |
- |
The form field name |
value |
string |
- |
The current value |
rhx-label |
string |
- |
Label text displayed above the input |
rhx-hint |
string |
- |
Hint text displayed below the input |
rhx-size |
string |
medium |
Input size: small, medium, large |
rhx-disabled |
bool |
false |
Whether the input is disabled |
rhx-min |
string |
- |
Minimum allowed value |
rhx-max |
string |
- |
Maximum allowed value |
rhx-step |
string |
1 |
Step increment for the stepper buttons |
rhx-no-steppers |
bool |
false |
Hide the increment/decrement buttons |
Accessibility
- Uses
input type="number"with native keyboard support. - Stepper buttons have
aria-labelfor screen readers. - Min, max, and step constraints are conveyed to assistive technology.