Switch

<oblyx-switch> renders a real <input type="checkbox" role="switch">, visually a pill track and sliding thumb rather than a checkbox's box, built on the same real-input-plus-visual-sibling mechanism as oblyx-checkbox. A switch is semantically a checkbox (one boolean value, submitted and toggled the same way) that only wants a different assistive-tech announcement, which role="switch" supplies. There is deliberately no wrapper field element: label, help and error are plain attributes on the control, and the label sits after the control on the same row.

Basic switch

HTML

Kotlin

<oblyx-switch label="Enable notifications"></oblyx-switch>

oblyxSwitch(label = "Enable notifications")

Sizes

Only sm and md exist; there is no lg switch.

Switch sizes

HTML

Kotlin

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

oblyxSwitch(label = "Small", size = OblyxSwitchSize.SM)
oblyxSwitch(label = "Medium", size = OblyxSwitchSize.MD)

Disabled

Disabled switch

HTML

Kotlin

<oblyx-switch label="Locked while your plan is downgrading" checked disabled></oblyx-switch>

oblyxSwitch(label = "Locked while your plan is downgrading", checked = true, disabled = true)

Error

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

Switch with error

HTML

Kotlin

<oblyx-switch label="Two-factor authentication" error="Two-factor authentication is required for this account."></oblyx-switch>

oblyxSwitch(label = "Two-factor authentication", error = "Two-factor authentication is required for this account.")

Form submission

name is what makes the on/off state appear in FormData. Same as a native checkbox, a switched-on control with no value set submits "on", and a switched-off control contributes nothing at all.

Switch inside a form

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

HTML

Kotlin

<form onsubmit="event.preventDefault(); const data = new FormData(this); this.querySelector('output').textContent = 'marketing = ' + (data.get('marketing') ?? '(not submitted)');">
  <oblyx-switch label="Receive marketing emails" name="marketing" checked></oblyx-switch>
  <button type="submit">Save</button>
  <output></output>
</form>

form {
  oblyxSwitch(label = "Receive marketing emails", name = "marketing", checked = true)
  button(type = ButtonType.submit) { +"Save" }
}

Required

required forwards to the native required attribute: a required switch left off blocks submission exactly like a required checkbox.

Required switch

Submit without turning it on to see native validation block it.

HTML

Kotlin

<form onsubmit="event.preventDefault(); this.querySelector('output').textContent = 'Form submitted.';">
  <oblyx-switch label="I confirm this data is accurate" name="confirm" required></oblyx-switch>
  <button type="submit">Continue</button>
  <output></output>
</form>

form {
  oblyxSwitch(label = "I confirm this data is accurate", name = "confirm", required = true)
  button(type = ButtonType.submit) { +"Continue" }
}

Reference

`<oblyx-switch>`

Attribute	Type	Default	Description
`label`	`string \| undefined`	–	Label text, always rendered and always associated with the switch 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 row and wired into `aria-describedby`.
`error`	`string \| undefined`	–	Error message. Presence alone, independent of `error` being non-empty text, sets `aria-invalid="true"` on the native input. When non-empty, also renders the message wired into `aria-describedby`, matching `oblyx-input`'s error handling. Purely informational: this does not call `setCustomValidity`.
`size`	`smmd`	`md`	Track/thumb size.
`name`	`string \| undefined`	–	Forwarded verbatim to the native `<input name>`. This is what makes the value appear in FormData/`receiveParameters()`.
`value`	`string \| undefined`	–	Forwarded verbatim to the native `<input value>`. Native checkboxes default to submitting `"on"` when checked and no `value` is set; set this to submit a different string.
`checked`	`boolean`	`false`	Initial checked state only, bound as the native input's `checked` content attribute. This can never clobber a user's toggle on a later re-render.
`required`	`boolean`	`false`	Forwarded to native `required`, enforcing real constraint validation. A required switch left off blocks submission exactly like a required checkbox.
`disabled`	`boolean`	`false`	Native disabled state, forwarded verbatim to the inner `<input>`.