Number
A number input field with validation
The number field generates an HTML 5 number input, which is great when you need a comfortable way to enter any numeric values. The number field also comes with built-in validation for numeric data.
![](https://v36.getkirby.com/media/pages/docs/reference/panel/fields/number/c6aa885fef-1704283981/number-960x.png)
Example
fields:
number:
label: Number
type: number
Field properties
Name | Type | Default | Description |
---|---|---|---|
after | – | Optional text that will be shown after the input | |
autofocus | bool |
– | Sets the focus on this field when the form loads. Only the first field with this label gets |
before | – | Optional text that will be shown before the input | |
default | – | Default number that will be saved when a new page/user/file is created | |
disabled | bool |
– | If true , the field is no longer editable and will not be saved |
help | – | Optional help text below the field | |
icon | string |
– | Optional icon that will be shown at the end of the field |
label | – | The field label can be set as string or associative array with translations | |
max | float |
– | The highest allowed number |
min | float |
– | The lowest allowed number |
placeholder | – | Optional placeholder value that will be shown when the field is empty | |
required | bool |
– | If true , the field has to be filled in correctly to be saved. |
step | – | Allowed incremental steps between numbers (i.e 0.5 ) |
|
translate | bool |
true |
If false , the field will be disabled in non-default languages and cannot be translated. This is only relevant in multi-language setups. |
when | – | Conditions when the field will be shown (since 3.1.0) | |
width | string |
1/1 |
The width of the field in the field grid. Available widths: 1/1 , 1/2 , 1/3 , 1/4 , 2/3 , 3/4
|
Decimals
Decimals can be used by adding the step
option.
fields:
price:
label: Price
type: number
step: .01
Minimum and maximum value
The min
and max
options define which numbers can be selected with the browser-specific up/down arrows and are also used to validate the input.
fields:
temperature:
label: Temperature
type: number
min: -50
max: 250
before
& after
values
The number field can show additional text before or after the input. This is great when you need a price field for example:
fields:
price:
label: Price
type: number
min: 0
before: €
How to use in templates/snippets
If your number field contains only integers, you can convert the value to a proper integer with the toInt()
field method:
<?= $page->numberfield()->toInt() ?>
For floating value, use the toFloat()
method:
<?= $page->numberfield()->toFloat() ?>