Cabin comfort
Both zones
Adjust in half-degree steps. Increase sits above decrease.
°C
Number field
Edits a numeric value with native validation, units, and bounded 44px increase and decrease actions.
Preview
In action
When to use
Use it for
- Numeric quantities that need visible stepping, native bounds, or a unit.
- Stacked controls when increase belongs above decrease at the end of a reading.
Not for
- A continuous interval with two endpoints; use RangeSlider.
- Codes and identifiers, which may have leading zeroes; use Input.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { NumberField } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/number-field.
2. Vendor the source
npx @noorddev/vlak-cli add number-field
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/number-field.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { NumberField } from "@noorddev/vlak-react";
<NumberField label="Cabin temperature" name="temperature" defaultValue={20} min={16} max={28} step={0.5} unit="°C" controlsPlacement="stacked" />Props
NumberField
Numeric input with native validation and bounded increment/decrement actions.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | ||
defaultValue | number | null | null | |
onValueChange | (value: number | null) => void | ||
min | number | ||
max | number | ||
step | number | 1 | |
label | ReactNode | ||
unit | string | ||
incrementLabel | string | "Increase value" | |
decrementLabel | string | "Decrease value" | |
controlsPlacement | "inline" | "stacked" | "inline" | Stack the increase button above decrease at the end of the field. |
Also accepts Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "size" | "min" | "max" | "step">.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves between the number field and available step actions. |
| Arrow up, Arrow down | Uses the browser's native numeric stepping while the input is focused. |
| Enter, Space | Activates a focused increase or decrease button. |
Accessibility
- The forwarded ref reaches the native number input; label, native form attributes, and name reach that input.
- min, max, and step use native validity. The buttons clamp at bounds; typed values retain native validation feedback.
- A cleared field reports null. value/defaultValue/onValueChange support controlled and uncontrolled use; form reset restores uncontrolled defaults.
- The unit is linked as a description. Each step action has a name and a 44px target.
Markup
<div class="rs-number-field"><label class="rs-number-field-label" for="cabin-temperature">Cabin temperature</label><div class="rs-number-field-row"><input class="rs-input rs-number-field-input" id="cabin-temperature" type="number" min="16" max="28" value="20" aria-describedby="cabin-unit" /><span class="rs-number-field-unit" id="cabin-unit">°C</span><div class="rs-number-field-controls"><button class="rs-btn-ghost rs-number-field-action" type="button" aria-label="Decrease value">−</button><button class="rs-btn-ghost rs-number-field-action" type="button" aria-label="Increase value">+</button></div></div></div>
Classes
.rs-number-field.rs-number-field-label.rs-number-field-row.rs-number-field-input.rs-number-field-unit.rs-number-field-action.rs-number-field-controls.rs-number-field-controls-stacked