Checkbox

<oblyx-checkbox> renders a real, labeled <input type="checkbox">, visually a box painted by an aria-hidden sibling, that participates in native HTML form submission with zero consumer JavaScript. There is deliberately no wrapper field element:label, help and error are plain attributes directly on the control, and unlike oblyx-input the label renders after the control, not before it.

Basic checkbox

HTML

Kotlin

<oblyx-checkbox label="Subscribe to updates"></oblyx-checkbox>

oblyxCheckbox(label = "Subscribe to updates")

Sizes

Checkbox sizes

HTML

Kotlin

<oblyx-checkbox label="Small" size="sm"></oblyx-checkbox>
<oblyx-checkbox label="Medium" size="md"></oblyx-checkbox>

oblyxCheckbox(label = "Small", size = OblyxCheckboxSize.SM)
oblyxCheckbox(label = "Medium", size = OblyxCheckboxSize.MD)

Indeterminate

indeterminate shows the tri-state mixed mark, commonly used for a "select all" checkbox covering a partially-selected list. HTML has no native indeterminate content attribute (it only exists as a live DOM property), so this is an Oblyx element attribute, applied to the native input's property underneath. It clears automatically the moment a reader clicks the control, same as native browser behavior.

Indeterminate checkbox

HTML

Kotlin

<oblyx-checkbox label="Select all" indeterminate></oblyx-checkbox>

oblyxCheckbox(label = "Select all", indeterminate = true)

Disabled

Forwarded verbatim to the native input. A disabled checkbox is excluded from FormData, matching native behavior.

Disabled checkbox

HTML

Kotlin

<oblyx-checkbox label="Locked while pending approval" checked disabled></oblyx-checkbox>

oblyxCheckbox(label = "Locked while pending approval", checked = true, disabled = true)

Error

Setting error sets aria-invalid="true" on the native input; non-empty text is also rendered below the control. This is purely informational and does not call setCustomValidity.

Checkbox with error

HTML

Kotlin

<oblyx-checkbox label="Accept the terms" error="You must accept the terms to continue."></oblyx-checkbox>

oblyxCheckbox(label = "Accept the terms", error = "You must accept the terms to continue.")

Form submission

name is what makes the checked state appear in FormData. A checked checkbox with no value set submits "on", matching native <input type="checkbox">: set value only when a distinguishing submitted value is genuinely needed. An unchecked checkbox contributes nothing to FormData at all.

Checkbox inside a form

Toggle it and submit to see whether newsletter appears in FormData.

HTML

Kotlin

<form onsubmit="event.preventDefault(); const data = new FormData(this); this.querySelector('output').textContent = 'newsletter = ' + (data.get('newsletter') ?? '(not submitted)');">
  <oblyx-checkbox label="Send me the newsletter" name="newsletter"></oblyx-checkbox>
  <button type="submit">Save preferences</button>
  <output></output>
</form>

form {
  oblyxCheckbox(label = "Send me the newsletter", name = "newsletter")
  button(type = ButtonType.submit) { +"Save preferences" }
}

Required

required forwards to the native required attribute: an unchecked required checkbox blocks submission natively, the same as a hand-written <input>.

Required checkbox

Submit without checking it to see native validation block it.

HTML

Kotlin

<form onsubmit="event.preventDefault(); this.querySelector('output').textContent = 'Form submitted.';">
  <oblyx-checkbox label="I agree to the terms" name="terms" required></oblyx-checkbox>
  <button type="submit">Continue</button>
  <output></output>
</form>

form {
  oblyxCheckbox(label = "I agree to the terms", name = "terms", required = true)
  button(type = ButtonType.submit) { +"Continue" }
}

Reference

`<oblyx-checkbox>`

Attribute	Type	Default	Description
`label`	`string \| undefined`	–	Label text, always rendered and associated with the native 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 control.
`help`	`string \| undefined`	–	Help text, rendered below the control and wired into `aria-describedby`.
`error`	`string \| undefined`	–	Error message. Presence alone (independent of `error` being non-empty text) sets `aria-invalid="true"`; non-empty text also renders the message wired into `aria-describedby`, matching oblyx-input's `error` contract.
`size`	`smmd`	`md`	Box size.
`name`	`string \| undefined`	–	Forwarded verbatim to the native `<input name>`. Makes the checked state appear in FormData/`receiveParameters()`.
`value`	`string \| undefined`	–	Forwarded verbatim to the native `<input value>`. Native checkboxes submit `"on"` when checked if this is left unset. Set it only when a consumer genuinely needs a non-default submitted value.
`checked`	`boolean`	`false`	Initial checked state only. Kept in sync with the live native state on every `change` event, so reading `checkboxEl.checked` afterward reflects reality.
`indeterminate`	`boolean`	`false`	Tri-state mixed indicator. Cleared automatically by native browser behavior the moment the user toggles the control, and kept in sync via the `change` listener.
`required`	`boolean`	`false`	Forwarded to native `required`. An unchecked required checkbox blocks submission natively.
`disabled`	`boolean`	`false`	Native disabled state, forwarded verbatim to the inner `<input>`. A disabled checkbox is excluded from FormData, matching native behavior.