Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA number field with a unit select that converts the number when the unit changes instead of keeping it, for length, mass, volume, time and temperature. Use this when people enter a measurement and may think in another unit.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it in recipes, shipping, fitness and engineering forms where "5 km" changed to miles should become 3.10686 mi, not stay 5 and silently mean something else.
Do not use it when you store the unit separately and want changing it to reinterpret the number (a correction of the unit, not a conversion). Use two separate controls for that.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
| --------------- | -------------------- | ------------------------------- | ----------------------------------------- | ----------------------- | -------------- | -------- | ------------------------ |
| dimension | "length" \\ | "mass" \\ | "volume" \\ | "time" \\ | "temperature" | length | Which units are offered. |
| value | { amount: number \\ | null; unit: string } | - | The value (controlled). |
| defaultValue | { amount, unit } | { amount: null, unit: first } | Initial value. |
| onValueChange | (value) => void | - | Runs on typing and after a conversion. |
| label | string | Amount | Names the group. |
| digits | number | 6 | Significant digits kept after converting. |
inputmode="decimal"; the pair is a role="group" named by label.role="status" line reads, for example, Converted 5 km to 3.10686 mi.The pattern ships with a Testing Library test (unit-value-field-converting.test.tsx) that covers length, mass and temperature conversion, rounding, an empty field and the status announcement.