Number Field Type

Renders a number control inside the block.

The type we would use inside the schema’s field_meta property to render this field is “number”: "type": "number"

If you haven’t already, we suggest you read the “model.json file” and “Field Types” pages before continuing.

Minimum Schema needed to create the field

"number_field": {
  "type": "object",
  "field_meta": {
    "type": "number",
    "label": "Number Field"
  },
  "default": {
    "value": 0
  }
}

This snippet of code will generate a simple input control (type=”number”) for managing number data. The field name will be “number_field”, its label will be “Number Field” and it will be zero by default.

What it would look like inside the block in the editor.

Number Field Type example | theme-redone

Rendering field’s data on the front-end:

We would use the same property that’s present inside the “default” object; "value", in this case.
In latte, it would look something like this.

<p>{$number_field['value']}</p>

Optional field_meta properties

Besides the field_meta properties we saw above, number Field Type has a few optional field_meta properties.

Those properties are:

  1. min
  2. max
  3. step
  4. help – written about on the Field Types page
  5. col – written about on the model.json page

min, max, and step properties

Since this field type renders an input of the number type, if present, these three properties will just be used as HTML attributes for that input field. They are self-explanatory, and their values should be of the number type.

"number_field": {
  "type": "object",
  "field_meta": {
    "type": "number",
    "label": "Number Field"
    "min": 10
    "max": 100
    "step": 2
  },
  "default": {
    "value": 0
  }
}
Join Our Newsletter

To get updates about Theme Redone