Input

<oblyx-input> renders a real, labeled <input> that participates in native HTML form submission and constraint validation with zero consumer JavaScript. There is deliberately no wrapper field element: label, help and error are plain attributes directly on the control.

Basic input

HTML

Kotlin

<oblyx-input label="Email" placeholder="you@example.com"></oblyx-input>

oblyxInput(label = "Email", placeholder = "you@example.com")

Types

type is forwarded verbatim to the native <input>, so the browser's own type-specific UI and format behavior apply. Only text, password and email are supported. text is the default.

Input types

HTML

Kotlin

<oblyx-input label="Text" type="text"></oblyx-input>
<oblyx-input label="Password" type="password"></oblyx-input>
<oblyx-input label="Email" type="email"></oblyx-input>

oblyxInput(label = "Text", type = OblyxInputType.TEXT)
oblyxInput(label = "Password", type = OblyxInputType.PASSWORD)
oblyxInput(label = "Email", type = OblyxInputType.EMAIL)

Sizes

Input sizes

HTML

Kotlin

<oblyx-input label="Small" size="sm"></oblyx-input>
<oblyx-input label="Medium" size="md"></oblyx-input>
<oblyx-input label="Large" size="lg"></oblyx-input>

oblyxInput(label = "Small", size = OblyxInputSize.SM)
oblyxInput(label = "Medium", size = OblyxInputSize.MD)
oblyxInput(label = "Large", size = OblyxInputSize.LG)

Help text

help renders between the label and the input box and is wired into the native input's aria-describedby.

Input with help text

HTML

Kotlin

<oblyx-input label="Username" help="Letters, numbers and underscores only."></oblyx-input>

oblyxInput(label = "Username", help = "Letters, numbers and underscores only.")

Disabled and readonly

Both are forwarded verbatim to the native <input>. A disabled input is excluded from FormData, matching native behavior; a readonly input still submits its value.

Disabled

HTML

Kotlin

<oblyx-input label="Email" value="locked@example.com" disabled></oblyx-input>

oblyxInput(label = "Email", value = "locked@example.com", disabled = true)

Readonly

HTML

Kotlin

<oblyx-input label="Reference code" value="ABC-123" readonly></oblyx-input>

oblyxInput(label = "Reference code", value = "ABC-123", readonly = true)

Error

Setting error puts the input in its error visual state and sets aria-invalid="true". This is purely informational: it does not call setCustomValidity and does not block submission on its own.

Input with error

HTML

Kotlin

<oblyx-input label="Email" value="not-an-email" error="Enter a valid email address."></oblyx-input>

oblyxInput(label = "Email", value = "not-an-email", error = "Enter a valid email address.")

Form submission and validation

name is what makes the value appear in FormData under that key. required,pattern, minlength and maxlength are all forwarded to the native input, so the browser's own constraint validation blocks submission and reports validity exactly like a hand-written <input> would. Try submitting the form below with the field empty.

Input inside a form

Submits and reads the value back out of FormData. Leave it empty and submit to see native validation block it.

HTML

Kotlin

<form onsubmit="event.preventDefault(); const data = new FormData(this); this.querySelector('output').textContent = 'Submitted email: ' + data.get('email');">
  <oblyx-input label="Email" name="email" type="email" required></oblyx-input>
  <button type="submit">Sign up</button>
  <output></output>
</form>

form {
  oblyxInput(label = "Email", name = "email", type = OblyxInputType.EMAIL, required = true)
  button(type = ButtonType.submit) { +"Sign up" }
}

Reference

`<oblyx-input>`

Attribute	Type	Default	Description
`label`	`string \| undefined`	–	Label text, always rendered 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 input.
`help`	`string \| undefined`	–	Help text, rendered between the label and the input box and wired into `aria-describedby`.
`error`	`string \| undefined`	–	Error message. Presence alone, independent of `error` being non-empty text, puts the input in its error visual state and sets `aria-invalid="true"`. When non-empty, also renders the message wired into `aria-describedby`. Purely informational: this does not call `setCustomValidity` or block submission.
`size`	`smmdlg`	`md`	Form-control height.
`type`	`textpasswordemail`	`text`	Native `<input type>`, forwarded verbatim.
`name`	`string \| undefined`	–	Forwarded verbatim to the native `<input name>`. This is what makes the value appear in FormData/`receiveParameters()`.
`value`	`string \| undefined`	–	Initial value only, applied as an attribute binding rather than a property binding so it never clobbers what the user has typed on a later re-render.
`placeholder`	`string \| undefined`	–	Forwarded verbatim to the native `<input placeholder>`.
`required`	`boolean`	`false`	Forwarded to native `required`. Enforces real constraint validation.
`pattern`	`string \| undefined`	–	Forwarded verbatim to native `<input pattern>`. Enforces real constraint validation, matching `required`/`minlength`/`maxlength`.
`minlength`	`string \| undefined`	–	Forwarded verbatim to native `<input minlength>`. Enforces real constraint validation, matching `required`/`pattern`/`maxlength`.
`maxlength`	`string \| undefined`	–	Forwarded verbatim to native `<input maxlength>`. Enforces real constraint validation, matching `required`/`pattern`/`minlength`.
`disabled`	`boolean`	`false`	Native disabled state, forwarded verbatim to the inner `<input>`.
`readonly`	`boolean`	`false`	Native readonly state, forwarded verbatim to the inner `<input>`.
`autocomplete`	`string \| undefined`	–	Forwarded verbatim to the native `<input autocomplete>`.