Forms
The form draws a whole form from JSON with the library's own fields — every input, select, date picker and upload behaves exactly as it does anywhere else in BMX. Sections group fields, repeating sections hold rows (the lines of an order, the guests of a booking) as cards or as a table, and pages get a progress bar and a last step to check every answer.
Logic needs no code: a field shows, is required or is worked out by an expression —
contact = 'phone', SUM(lines.amount) — in a small language the form reads
itself and never runs as script. Checks appear as each field is left, all at once with a linked summary
when the form is sent, and a server's own field errors land against the fields too.
The form designer, in Hypernova Gold, builds those forms by dragging fields onto pages.
An order in three steps
Send the first page empty to see the summary of problems. Lines work out their amounts, the address shows only for delivery, postage is free from £50, and the last step lists every answer with a Change link. Your answers are kept as a draft in this browser and filled back in next time.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-form id="fm-order" autosave="showcase-order" locale="en-GB" style="--bmx-form-max-width: 48rem"></bmx-form>
Conditions and calculations
A car insurance quote. Each answer moves the price; claims are a repeating section that only appears when there are any; a young driver is asked for a supervising driver; and the price is a worked-out field. Beside it is the JSON the form would send, which leaves out whatever is hidden.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-form id="fm-quote" locale="en-GB" hide-actions></bmx-form>
Checks, and the server's answer
The user name is checked by the page's own validator, a stand-in for a server that takes a moment; try admin. The passwords must match by a rule written in the schema. Send it with an email that contains taken and the stand-in server's field error appears against the email.
The same rules on a server. The form's engine is a plain module with no DOM in it:
validateForm(schema, answers) gives a server the very messages the reader saw, so a
submission is checked twice with one set of rules. With action, the form posts JSON (or
multipart with files) and puts a server's { errors: { path: message } } against the fields.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-form id="fm-signup" locale="en-GB" style="--bmx-form-max-width: 34rem"></bmx-form>
The same answers, read only
readonly shows a form's answers as text, grouped by page, with option labels, money and
dates as a reader expects them — for a confirmation page, an approval screen or a print-out. Send
the order above and its answers appear here.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-form id="fm-readonly" readonly locale="en-GB" style="--bmx-form-max-width: 48rem"></bmx-form>
The form designer
Drag a field from the list onto the page, or choose one and it goes after the chosen field. Set labels, options, checks and conditions on the right — build a condition from a field, a test and a value, or type it and have it checked as you go. Rename a field and every condition that reads it follows. Preview runs the form; JSON is the schema; Start from… offers templates.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-form-designer id="fm-designer" style="--bmx-form-designer-height: 44rem"></bmx-form-designer>