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.

Requirements

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    ...
3</div>

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.

Variables

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.

Methods

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.

With Alpine.js conditional fields