# Bad value “numeric” for attribute “type” on element “input”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-numeric-for-attribute-type-on-element-input
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML `<input>` element accepts a specific set of values for its `type` attribute, as defined by the HTML specification. The value `"numeric"` is not one of them. When a browser encounters an unrecognized `type` value, it falls back to `type="text"`, meaning the user gets a plain text field instead of a dedicated numeric input. This fallback behavior means you lose built-in features like increment/decrement spinner controls, numeric keyboard on mobile devices, and native client-side validation that rejects non-numeric entries.

This confusion often arises because of the `inputmode="numeric"` attribute, which *is* valid and controls which virtual keyboard appears on mobile devices. The `inputmode` attribute and the `type` attribute serve different purposes, and mixing them up leads to this validation error.

Using the correct `type="number"` value matters for several reasons:

- **Accessibility:** Screen readers and assistive technologies use the `type` attribute to announce the expected input format to users.
- **User experience:** Browsers display appropriate controls (spinners, numeric keypads) for `type="number"` inputs.
- **Validation:** Native form validation automatically checks that the entered value is a valid number, within optional `min`/`max` bounds and matching an optional `step` value.
- **Standards compliance:** Invalid `type` values cause W3C validation errors and signal potential bugs in your markup.

## Examples

### Incorrect: using `type="numeric"`

This triggers the validation error because `"numeric"` is not a valid `type` value:

```html
<label for="quantity">Quantity:</label>
<input type="numeric" id="quantity" name="quantity">
```

The browser will treat this as `type="text"`, so users can type any characters, no spinner controls appear, and no numeric validation occurs.

### Correct: using `type="number"`

Replace `"numeric"` with `"number"`:

```html
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10">
```

This gives you a proper numeric input with optional `min`, `max`, and `step` attributes for constraining the allowed range and increments.

### Alternative: using `inputmode="numeric"` with `type="text"`

If you need a numeric keyboard on mobile but want more control over the input (for example, accepting values like zip codes or credit card numbers that aren't truly "numbers"), you can use `inputmode="numeric"` on a text input instead:

```html
<label for="zip">ZIP Code:</label>
<input type="text" inputmode="numeric" pattern="[0-9]{5}" id="zip" name="zip">
```

Here, `type="text"` is valid, `inputmode="numeric"` triggers the numeric keyboard on mobile devices, and the `pattern` attribute provides validation. This approach is useful when `type="number"` isn't appropriate — for instance, `type="number"` strips leading zeros and allows scientific notation like `1e5`, which is undesirable for codes and identifiers.

### Summary of the fix

| Before (invalid) | After (valid) | Use case |
|---|---|---|
| `type="numeric"` | `type="number"` | Actual numeric values (quantities, prices, ages) |
| `type="numeric"` | `type="text" inputmode="numeric"` | Numeric-looking codes (ZIP, PIN, credit card) |

In most cases, simply changing `type="numeric"` to `type="number"` is the correct fix. Choose the `inputmode` approach only when you specifically need a text field with a numeric keyboard.