Forms and validation

Every Oblyx form control renders a real native input inside its light DOM: an <input>, an <input type="checkbox">, an <input type="radio">. That native element is what joins form.elements, FormData, and the browser's own constraint validation, identically whether it was on the page at load or arrived later in an HTMX swap. Nothing collects or serializes a value on the client; a plain <form> POST finds every control's value the same way it would find a hand-written <input>'s.

A labeled input

label, help and name are plain attributes. The label is always a real <label for> pointing at the control, not decorative text, and help is wired into aria-describedby automatically.

<oblyx-input label="Display name" help="Shown on your public profile." name="displayName"></oblyx-input>

oblyxInput(label = "Display name", help = "Shown on your public profile.", name = "displayName")

Constraint validation

required, pattern, minlength, maxlength and type forward verbatim onto the underlying native <input>, so the browser's own validation applies: :invalid styling, reportValidity(), and submit-blocking all work with zero Oblyx JavaScript. Submit the form below empty to see the browser's native validation message.

<oblyx-input label="Work email" name="email" type="email" required></oblyx-input>

oblyxInput(label = "Work email", name = "email", type = OblyxInputType.EMAIL, required = true)

The error state

error is a separate, purely informational attribute: setting it puts the control in its error visual state and sets aria-invalid="true". It does not call setCustomValidity() and does not, on its own, block submission. Use it to display a validation result that came back from elsewhere, such as a server response to a previous submission, alongside or instead of native constraint validation.

<oblyx-input label="Username" name="username" value="a" error="Must be at least 3 characters."></oblyx-input>

oblyxInput(label = "Username", name = "username", value = "a", error = "Must be at least 3 characters.")

No field wrapper

There is no oblyx-field element. Every form control takes label,help and error directly as its own attributes, rather than being wrapped in a separate labeling element. Astryx's own Field/FieldLabel/FieldStatus family contributes little beyond static layout, a label, a description and a status box in fixed order, and its one genuinely coordinated behavior (a horizontal-labels layout mode) is expressed here as a plain CSS descendant selector instead of the wrapper's own coordination logic. Every control's label, help and error markup shares one class convention (.ox-field__label, .ox-field__help,.ox-field__error) so the visual result is identical across controls without a wrapper element gluing them together.

Checkbox

A checkbox submits its value attribute (default: the browser's own "on") under its name only when checked, exactly like a hand-written <input type="checkbox">; an unchecked checkbox contributes nothing to FormData at all.

<oblyx-checkbox label="Send me product updates" name="updates"></oblyx-checkbox>

oblyxCheckbox(label = "Send me product updates", name = "updates")

Radio grouping via name

There is no oblyx-radio-group element. Any number of <oblyx-radio> instances that share a name attribute are automatically one group, exactly the way plain <input type="radio"> elements group: mutual exclusion, arrow-key roving navigation between them, and which one's value ends up in FormData are all native browser behavior, not Oblyx bookkeeping. Setting required on any radio in the group requires one member of that group to be checked before the form submits, enforced by the browser across the whole group.

This grouping is deliberate for HTMX: a fragment routinely swaps in a single <oblyx-radio> with no siblings and no group wrapper present, which is the normal shape of an HTMX response, not an edge case. Because grouping lives entirely in the name attribute, read by the browser rather than by any Oblyx JavaScript, a lone swapped-in radio already has everything it needs. See HTMX and server-rendered fragments for the general version of this rule.

<oblyx-radio label="Email" name="contact-method" value="email" checked></oblyx-radio>
<oblyx-radio label="Phone" name="contact-method" value="phone"></oblyx-radio>
<oblyx-radio label="No contact" name="contact-method" value="none"></oblyx-radio>

oblyxRadio(label = "Email", name = "contact-method", value = "email", checked = true)
oblyxRadio(label = "Phone", name = "contact-method", value = "phone")
oblyxRadio(label = "No contact", name = "contact-method", value = "none")

A complete form, no JavaScript required to submit

The example below reads out its own submitted FormData so you can see exactly what reaches the server. The inline script that does the reading is here purely for this demo, so the page doesn't navigate away; collecting the values themselves is entirely native browser behavior, not Oblyx code.

<form onsubmit="event.preventDefault(); var data = new FormData(this); var pairs = []; data.forEach(function (v, k) { pairs.push(k + '=' + v); }); this.querySelector('output').textContent = pairs.length ? pairs.join(', ') : 'No data submitted.';">
  <oblyx-input label="Full name" name="name" required></oblyx-input>
  <oblyx-checkbox label="Subscribe to the newsletter" name="subscribe"></oblyx-checkbox>
  <oblyx-radio label="Email me" name="contact-method" value="email" checked></oblyx-radio>
  <oblyx-radio label="Don't contact me" name="contact-method" value="none"></oblyx-radio>
  <oblyx-button type="submit">Submit</oblyx-button>
  <output></output>
</form>

form {
  oblyxInput(label = "Full name", name = "name", required = true)
  oblyxCheckbox(label = "Subscribe to the newsletter", name = "subscribe")
  oblyxRadio(label = "Email me", name = "contact-method", value = "email", checked = true)
  oblyxRadio(label = "Don't contact me", name = "contact-method", value = "none")
  oblyxButton(type = OblyxButtonType.SUBMIT) { +"Submit" }
}

Reference