Radio

<oblyx-radio> renders a single real, labeled <input type="radio">. There is deliberately no wrapper field element and no oblyx-radio-group: label,help and error are plain attributes on the control, and the label renders after it, not before.

Grouping is the native name attribute, nothing else. Any number of <oblyx-radio> elements that share a name are automatically one group : mutual exclusion, arrow-key navigation and FormData serialization all come from the browser's own radio-button state machine, not from any JavaScript coordinating sibling elements. There is no group wrapper to reach for and none is planned: give every radio in a set the same name and a distinct value, and that is the entire mechanism, exactly like plain <input type="radio">.

A radio group, formed by a shared name

HTML

Kotlin

<oblyx-radio name="plan" value="free" label="Free" checked></oblyx-radio>
<oblyx-radio name="plan" value="pro" label="Pro"></oblyx-radio>
<oblyx-radio name="plan" value="team" label="Team"></oblyx-radio>

oblyxRadio(name = "plan", value = "free", label = "Free", checked = true)
oblyxRadio(name = "plan", value = "pro", label = "Pro")
oblyxRadio(name = "plan", value = "team", label = "Team")

Sizes

Radio sizes

HTML

Kotlin

<oblyx-radio name="size-demo-a" value="a" label="Small" size="sm" checked></oblyx-radio>
<oblyx-radio name="size-demo-b" value="a" label="Medium" size="md" checked></oblyx-radio>

oblyxRadio(name = "size-demo-a", value = "a", label = "Small", size = OblyxRadioSize.SM, checked = true)
oblyxRadio(name = "size-demo-b", value = "a", label = "Medium", size = OblyxRadioSize.MD, checked = true)

Disabled

A disabled radio is excluded from FormData and from the group's arrow-key navigation, matching plain HTML.

Disabled option within a group

HTML

Kotlin

<oblyx-radio name="shipping" value="standard" label="Standard" checked></oblyx-radio>
<oblyx-radio name="shipping" value="express" label="Express (unavailable for this address)" disabled></oblyx-radio>

oblyxRadio(name = "shipping", value = "standard", label = "Standard", checked = true)
oblyxRadio(name = "shipping", value = "express", label = "Express (unavailable for this address)", disabled = true)

Error

Setting error puts a radio in its error state (aria-invalid="true") and, when non-empty, renders the message. This is set per-radio, so a group sharing one error message sets it on each member, as in the example below.

Radio group with an error

HTML

Kotlin

<oblyx-radio name="contact-method" value="email" label="Email" error="Choose a contact method."></oblyx-radio>
<oblyx-radio name="contact-method" value="phone" label="Phone" error="Choose a contact method."></oblyx-radio>

oblyxRadio(name = "contact-method", value = "email", label = "Email", error = "Choose a contact method.")
oblyxRadio(name = "contact-method", value = "phone", label = "Phone", error = "Choose a contact method.")

Form submission and required groups

Whichever radio in the group is checked contributes its value to FormData under the shared name. Per the HTML spec, required on any radio in a name group requires one member of that group to be checked before the group's form can submit: the browser enforces this across the whole group with no Oblyx JavaScript involved.

Radio group inside a form

Pick a plan and submit to see its value read back out of FormData.

HTML

Kotlin

<form onsubmit="event.preventDefault(); const data = new FormData(this); this.querySelector('output').textContent = 'plan = ' + data.get('plan');">
  <oblyx-radio name="plan" value="free" label="Free" checked required></oblyx-radio>
  <oblyx-radio name="plan" value="pro" label="Pro" required></oblyx-radio>
  <oblyx-radio name="plan" value="team" label="Team" required></oblyx-radio>
  <button type="submit">Choose plan</button>
  <output></output>
</form>

form {
  oblyxRadio(name = "plan", value = "free", label = "Free", checked = true, required = true)
  oblyxRadio(name = "plan", value = "pro", label = "Pro", required = true)
  oblyxRadio(name = "plan", value = "team", label = "Team", required = true)
  button(type = ButtonType.submit) { +"Choose plan" }
}

Reference

`<oblyx-radio>`

Attribute	Type	Default	Description
`label`	`string \| undefined`	–	Label text, always rendered after the control and always associated with the input via a real `<label for>`. Required for an accessible name; omitting it is a defect and is flagged loudly rather than silently producing an unlabeled radio.
`help`	`string \| undefined`	–	Help text, rendered under the control and wired into `aria-describedby`.
`error`	`string \| undefined`	–	Error message. Presence alone puts the control in its error state (`aria-invalid="true"`) and, when non-empty, renders the message wired into `aria-describedby`, same contract as `oblyx-input.error`.
`size`	`smmd`	`md`	Visual size.
`name`	`string \| undefined`	–	Forwarded verbatim to the native `<input name>`, the entire grouping mechanism. Radios sharing this value form one native group with mutual exclusion and arrow-key navigation.
`value`	`string \| undefined`	–	Forwarded verbatim to the native `<input value>`. What actually appears in FormData under `name` when this radio is the checked one in its group.
`checked`	`boolean`	`false`	Initial checked state only, bound as the boolean `checked` HTML attribute (`?checked=${...}`), never as the `.checked` IDL property. Per the HTML spec, a radio's checkedness has its own "dirty checkedness flag": once the user clicks it (or the browser un-checks it because a same-named sibling was clicked instead), the live `.checked` property detaches from the `checked` content attribute. Re-rendering with `toggleAttribute('checked', ...)` on every unrelated property change (e.g. toggling `error`) can therefore never fight the user's or the browser's own native radio-group selection.
`required`	`boolean`	`false`	Forwarded to native `required`, enforcing real constraint validation. Per the HTML spec, `required` on any radio in a `name` group requires one member of that group to be checked before the group's form can submit; the browser enforces this natively across the whole group.
`disabled`	`boolean`	`false`	Native disabled state, forwarded verbatim to the inner `<input>`. A disabled radio is excluded from FormData and from the group's arrow-key navigation, matching plain HTML.