Mity Docs Mity Docs for Mity Digital
Variable Number Fieldtype Documentation

Custom Layout

Layouts are included for a Button, Radio and Select output. But you can choose to have a totally custom layout if you need.


You can do whatever you want, however you want, with one requirement: you must have a single field that stores the actual value of the variable number fieldtype. Use this to get started:

1<input id="{{ handle }}"
2 type="hidden"
3 name="{{ handle }}"
4 value="{{ old ?? default}}"
5 x-ref="value"
6 {{ if js_driver }}{{ js_attributes }}{{ else }}x-model="value" {{ /if }}
7 {{ if validate|contains:required }}required{{ /if }}>

You can customise this to meet your needs, as long as its value is updated as your users interact with the fieldtype.

Use the Alpine.js component

If you want to use the fieldtype's logic, ensure your entire fieldtype is wrapped correctly, and includes the x-data reference and required attributes.

1<div x-data="variableNumberFieldtype" data-init="{{ init | to_json | entities }}" data-js="{{ js_driver }}" data-target-container="" data-target="{{ handle }}">
2 ...

The Alpine.js component includes a number of functions and variables to help you out.

Don't forget to check out the included layouts to see how they're wired together, and what flexibility and functionality is needed.


option stores the currently selected number option - one of your configured "options", or the word "other" for when the user wants to enter their own value (if allowed).

value stores the actual value of the fieldtype. There's also an x-ref of value if you need to access the field directly.

custom stores the custom value entered. There's also an x-ref of custom if you need to access the field directly.


It is unlikely you will need these - they're used internally.

updateOther sets the fieldtype to use the "other" option.

updateTarget sets the fieldtype's actual value.