# Number A number input field with validation **** - Read more: - Source: **** 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.
## Example ```yaml fields: number: label: Number type: number ``` ## Field properties
Name Type Default Description
after mixed null Optional text that will be shown after the input
autofocus bool null Sets the focus on this field when the form loads. Only the first field with this label gets
before mixed null Optional text that will be shown before the input
default mixed null Default number that will be saved when a new page/user/file is created
disabled bool null If true, the field is no longer editable and will not be saved
help mixed null Optional help text below the field
icon string null Optional icon that will be shown at the end of the field
label mixed null The field label can be set as string or associative array with translations
max float null The highest allowed number
min float null The lowest allowed number
placeholder mixed null Optional placeholder value that will be shown when the field is empty
required bool null If true, the field has to be filled in correctly to be saved.
step mixed null Allowed incremental steps between numbers (i.e 0.5) Use any to allow any decimal value.
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 mixed null Conditions when the field will be shown (since 3.1.0)
width string '1/1' The width of the field in the field grid, e.g. 1/1, 1/2, 1/3, 1/4, 2/3, 3/4
## Decimals Decimals can be used by adding the `step` option. ```yaml 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. ```yaml 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: ```yaml 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: ```php numberfield()->toInt() ?> ``` For floating value, use the `toFloat()` method: ```php numberfield()->toFloat() ?> ```