Skip to content

Commit 416d9e9

Browse files
metonymmetonym
committed
feat(number-input): allow decimals (#2233)
Fixes #1873
1 parent c40172e commit 416d9e9

File tree

7 files changed

+225
-59
lines changed

7 files changed

+225
-59
lines changed

‎COMPONENT_INDEX.md‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2500,31 +2500,32 @@ export type NumberInputTranslationId = "increment" | "decrement";
25002500

25012501
### Props
25022502

2503-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
2504-
| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
2505-
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
2506-
| value | No | <code>let</code> | Yes | <code>null &#124; number</code> | <code>null</code> | Specify the input value.<br />Use `null` to denote "no value" |
2507-
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the input |
2508-
| step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment |
2509-
| max | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum value |
2510-
| min | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the minimum value |
2511-
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
2512-
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the input to be read-only |
2513-
| allowEmpty | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow for an empty value |
2514-
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
2515-
| hideSteppers | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the input stepper buttons |
2516-
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons |
2517-
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
2518-
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
2519-
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate a warning state |
2520-
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
2521-
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
2522-
| label | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
2523-
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
2524-
| translateWithId | No | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
2525-
| translationIds | No | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids |
2526-
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
2527-
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
2503+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
2504+
| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2505+
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
2506+
| value | No | <code>let</code> | Yes | <code>null &#124; number</code> | <code>null</code> | Specify the input value.<br />Use `null` to denote "no value" |
2507+
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the input |
2508+
| step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment |
2509+
| max | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum value |
2510+
| min | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the minimum value |
2511+
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
2512+
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the input to be read-only |
2513+
| allowEmpty | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow for an empty value |
2514+
| allowDecimal | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to preserve decimal input formatting (e.g., "1.0", "2.00")<br />When enabled, uses type="text" with inputmode="decimal" instead of type="number" |
2515+
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
2516+
| hideSteppers | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the input stepper buttons |
2517+
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons |
2518+
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
2519+
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
2520+
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate a warning state |
2521+
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
2522+
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
2523+
| label | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
2524+
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
2525+
| translateWithId | No | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
2526+
| translationIds | No | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids |
2527+
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
2528+
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
25282529

25292530
### Slots
25302531

‎docs/src/COMPONENT_API.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9284,6 +9284,18 @@
92849284
"constant": false,
92859285
"reactive": false
92869286
},
9287+
{
9288+
"name": "allowDecimal",
9289+
"kind": "let",
9290+
"description": "Set to `true` to preserve decimal input formatting (e.g., \"1.0\", \"2.00\")\nWhen enabled, uses type=\"text\" with inputmode=\"decimal\" instead of type=\"number\"",
9291+
"type": "boolean",
9292+
"value": "false",
9293+
"isFunction": false,
9294+
"isFunctionDeclaration": false,
9295+
"isRequired": false,
9296+
"constant": false,
9297+
"reactive": false
9298+
},
92879299
{
92889300
"name": "disabled",
92899301
"kind": "let",

‎docs/src/pages/components/NumberInput.svx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,12 @@ Control the increment/decrement step size using the `step` prop. This example us
3939

4040
<NumberInput value="{1}" helperText="Step of 0.1" step={0.1} label="Clusters" />
4141

42+
## Preserve decimal input
43+
44+
Preserve decimal input formatting like "1.0", "2.00", or "3." by setting `allowDecimal` to `true`. This uses `type="text"` with `inputmode="decimal"` instead of `type="number"`, allowing trailing zeros and decimal points to be preserved while typing. This is useful for financial data or precise decimal entry.
45+
46+
<NumberInput allowDecimal value={1.0} helperText="Trailing zeros preserved" step={0.01} label="Amount" />
47+
4248
## Hidden label
4349

4450
Hide the label visually while maintaining accessibility by setting `hideLabel` to `true`. The label is still available to screen readers.

0 commit comments

Comments
 (0)