static-cms/website/content/docs/widget-number.mdx

---
group: Widgets
title: Number
weight: 20
---

- **Name:** `number`
- **UI:** HTML [number input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)
- **Data type:** `string` or `number`. Configured by `value_type` option

The number widget uses an HTML number input, saving the value as a string, integer, or floating point number.

## Widget options

For common options, see [Common widget options](/docs/widgets#common-widget-options).

| Name       | Type                                 | Default    | Description                                                                         |
| ---------- | ------------------------------------ | ---------- | ----------------------------------------------------------------------------------- |
| default    | string<br />\| number                | `''`       | _Optional_. The default value for the field. Accepts a string or number             |
| value_type | 'int'<br />\| 'float'<br />\| string | `'string'` | _Optional_. Accepts `int` or `float`; any other value results in saving as a string |
| min        | number                               |            | _Optional_. Minimum value accepted                                                  |
| max        | number                               |            | _Optional_. Maximum value accepted                                                  |
| step       | number                               | `1`        | _Optional_. Size of steps when stepping up or down in input                         |

## Example

<CodeTabs>
```yaml
name: 'puppies'
label: 'Puppy Count'
widget: 'number'
default: 2
value_type: 'int'
min: 1
max: 101
step: 2
```

```js
name: 'puppies',
label: 'Puppy Count',
widget: 'number',
default: 2,
value_type: 'int',
min: 1,
max: 101,
step: 2,
```

</CodeTabs>