Inputs API

Complete API reference for @oge-ui/inputs. The three editors share one field chrome and one base class — shared members are listed once per editor as "Common" groups, editor-specific members first. Live examples are on the demo pages.

Properties Methods Events Types

OgeTextBox

oge-text-box

Properties 43

OgeTextBox

Name	Type	Default	Description
`value`	`model<string>`	`''`	Editor value — two-way.
`mode`	`OgeTextBoxMode`	`'text'`	Native input type. `password` auto-enables the reveal toggle.
`maxLength`	`number \| undefined`	—	Counter denominator; enforced natively while `counterMode` is `'limit'`.
`minLength`	`number \| undefined`	—	Native `minlength` attribute.
`showCounter`	`boolean`	`false`	Renders the grapheme-accurate character counter in the subscript end slot.
`counterMode`	`OgeInputCounterMode`	`'limit'`	Enforce `maxLength` natively, or allow typing past it and color the counter.
`revealable`	`boolean`	`true`	Password reveal toggle; on by default for `mode="password"`. Preserves caret/selection when toggling.
`showCopyButton`	`boolean`	`false`	Copy-to-clipboard rail button (API keys, tokens…); copies the live text.
`autocomplete`	`string \| undefined`	—	Native `autocomplete` attribute.
`inputMode`	`string \| undefined`	—	Native `inputmode` attribute.
`enterKeyHint`	`string \| undefined`	—	Native `enterkeyhint` attribute.
`autocapitalize`	`string \| undefined`	—	Native `autocapitalize` attribute.
`spellcheck`	`boolean \| undefined`	—	`undefined` omits the attribute (browser default).

Common — field chrome (all editors)

Name	Type	Default	Description
`label`	`string`	`''`	Field label; placement follows `labelMode`.
`labelMode`	`OgeInputLabelMode`	`'static'`	Label placement: static / floating / hidden (aria-only) / outside.
`stylingMode`	`OgeInputStylingMode`	`'outlined'`	Container fill style.
`size`	`OgeInputSize`	`'md'`	Container height preset — 28/34/42px, the button scale.
`placeholder`	`string`	`''`	Native placeholder text.
`hint`	`string \| undefined`	—	Helper text in the subscript region (hidden while an error shows).
`tooltip`	`string \| undefined`	—	Native `title` attribute of the input element.
`subscriptSizing`	`OgeInputSubscriptSizing`	`'fixed'`	Whether the hint/error line reserves height, collapses, or is removed.
`fluid`	`boolean`	`false`	Stretches the field to 100% width (default 240px via `--oge-input-width`).
`width`	`number \| string \| undefined`	—	This field’s width — a number is px, a string any CSS length. Sets `--oge-input-width` on this host only; `fluid` still wins.
`showClearButton`	`boolean`	`false`	Renders the clear (✕) button while the field has a value.
`showSuccessIcon`	`OgeInputShowSuccessIcon`	`false`	Success icon when valid: `false` / on touch / always.
`id`	`string \| undefined`	—	Base for the generated element ids (input/label/hint/error/counter).
`tabIndex`	`number`	`0`	Tab order of the native input.
`autofocus`	`boolean`	`false`	Focuses the editor after its first render.
`selectOnFocus`	`boolean`	`false`	Selects the whole text when the input receives focus.
`inputAttr`	`Record<string, string>`	`{}`	Escape hatch: extra attributes rendered onto the native input (template-owned attributes are ignored).
`messages`	`Partial<OgeInputsMessages> \| undefined`	—	Per-instance overrides of user-facing strings.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 4

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 8

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

OgeTextArea

oge-text-area

Properties 41

OgeTextArea

Name	Type	Default	Description
`value`	`model<string>`	`''`	Editor value — two-way.
`rows`	`number`	`3`	Visible rows when `autoResize` is off; the floor when it is on.
`autoResize`	`boolean`	`false`	Grow/shrink with content between `minRows` and `maxRows`.
`minRows`	`number \| undefined`	—	Defaults to `rows`.
`maxRows`	`number \| undefined`	—	`undefined` = unbounded growth.
`maxLength`	`number \| undefined`	—	Counter denominator / native cap.
`minLength`	`number \| undefined`	—	Native `minlength` attribute.
`showCounter`	`boolean`	`false`	Grapheme-accurate character counter.
`counterMode`	`OgeInputCounterMode`	`'limit'`	Enforce `maxLength` natively, or soft-cap.
`spellcheck`	`boolean`	`true`	Non-optional here, unlike the text box.
`autocapitalize`	`string \| undefined`	—	Native `autocapitalize` attribute.

Common — field chrome (all editors)

Name	Type	Default	Description
`label`	`string`	`''`	Field label; placement follows `labelMode`.
`labelMode`	`OgeInputLabelMode`	`'static'`	Label placement: static / floating / hidden (aria-only) / outside.
`stylingMode`	`OgeInputStylingMode`	`'outlined'`	Container fill style.
`size`	`OgeInputSize`	`'md'`	Container height preset — 28/34/42px, the button scale.
`placeholder`	`string`	`''`	Native placeholder text.
`hint`	`string \| undefined`	—	Helper text in the subscript region (hidden while an error shows).
`tooltip`	`string \| undefined`	—	Native `title` attribute of the input element.
`subscriptSizing`	`OgeInputSubscriptSizing`	`'fixed'`	Whether the hint/error line reserves height, collapses, or is removed.
`fluid`	`boolean`	`false`	Stretches the field to 100% width (default 240px via `--oge-input-width`).
`width`	`number \| string \| undefined`	—	This field’s width — a number is px, a string any CSS length. Sets `--oge-input-width` on this host only; `fluid` still wins.
`showClearButton`	`boolean`	`false`	Renders the clear (✕) button while the field has a value.
`showSuccessIcon`	`OgeInputShowSuccessIcon`	`false`	Success icon when valid: `false` / on touch / always.
`id`	`string \| undefined`	—	Base for the generated element ids (input/label/hint/error/counter).
`tabIndex`	`number`	`0`	Tab order of the native input.
`autofocus`	`boolean`	`false`	Focuses the editor after its first render.
`selectOnFocus`	`boolean`	`false`	Selects the whole text when the input receives focus.
`inputAttr`	`Record<string, string>`	`{}`	Escape hatch: extra attributes rendered onto the native input (template-owned attributes are ignored).
`messages`	`Partial<OgeInputsMessages> \| undefined`	—	Per-instance overrides of user-facing strings.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 4

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 8

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

OgeNumberBox

oge-number-box

Properties 38

OgeNumberBox

Name	Type	Default	Description
`value`	`model<number \| null>`	`null`	`null` is the empty state — never `0`.
`min`	`number \| undefined`	—	Lower bound — values clamp on commit (typing is never blocked).
`max`	`number \| undefined`	—	Upper bound — clamped on commit.
`step`	`number`	`1`	Spin/arrow-key increment. Spinning commits immediately.
`showSpinButtons`	`boolean`	`false`	Up/down spin buttons with hold-to-repeat.
`format`	`Intl.NumberFormatOptions \| undefined`	—	Display formatting applied while unfocused; focus shows the raw number. `style: 'percent'` formats display only — the model value is not rescaled.
`locale`	`string \| undefined`	—	Overrides the application locale (`LOCALE_ID`).
`mode`	`OgeNumberBoxMode`	`'text'`	Native `type` attribute; `inputmode` is always `decimal`.

Common — field chrome (all editors)

Name	Type	Default	Description
`label`	`string`	`''`	Field label; placement follows `labelMode`.
`labelMode`	`OgeInputLabelMode`	`'static'`	Label placement: static / floating / hidden (aria-only) / outside.
`stylingMode`	`OgeInputStylingMode`	`'outlined'`	Container fill style.
`size`	`OgeInputSize`	`'md'`	Container height preset — 28/34/42px, the button scale.
`placeholder`	`string`	`''`	Native placeholder text.
`hint`	`string \| undefined`	—	Helper text in the subscript region (hidden while an error shows).
`tooltip`	`string \| undefined`	—	Native `title` attribute of the input element.
`subscriptSizing`	`OgeInputSubscriptSizing`	`'fixed'`	Whether the hint/error line reserves height, collapses, or is removed.
`fluid`	`boolean`	`false`	Stretches the field to 100% width (default 240px via `--oge-input-width`).
`width`	`number \| string \| undefined`	—	This field’s width — a number is px, a string any CSS length. Sets `--oge-input-width` on this host only; `fluid` still wins.
`showClearButton`	`boolean`	`false`	Renders the clear (✕) button while the field has a value.
`showSuccessIcon`	`OgeInputShowSuccessIcon`	`false`	Success icon when valid: `false` / on touch / always.
`id`	`string \| undefined`	—	Base for the generated element ids (input/label/hint/error/counter).
`tabIndex`	`number`	`0`	Tab order of the native input.
`autofocus`	`boolean`	`false`	Focuses the editor after its first render.
`selectOnFocus`	`boolean`	`false`	Selects the whole text when the input receives focus.
`inputAttr`	`Record<string, string>`	`{}`	Escape hatch: extra attributes rendered onto the native input (template-owned attributes are ignored).
`messages`	`Partial<OgeInputsMessages> \| undefined`	—	Per-instance overrides of user-facing strings.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 4

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 8

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

OgeSelectBox

oge-select-box

Properties 58

OgeSelectBox

Name	Type	Default	Description
`value`	`model<unknown>`	`null`	Committed value (the `valueExpr` of the selected item); two-way.
`items`	`readonly TItem[] \| OgeSelectBoxItemsFn`	`[]`	The selectable items: an array, or a function invoked lazily on first open (sync or promise; loading/error rows render while pending). The selected item is resolved from this full set, never the filtered one.
`displayExpr`	`string \| ((item) => string)`	—	Item → display text. Omitted, the item itself is stringified.
`valueExpr`	`string \| ((item) => unknown)`	—	Item → committed value. Omitted, the whole item is the value.
`disabledExpr`	`string \| ((item) => boolean)`	—	Marks individual items as non-selectable.
`searchEnabled`	`boolean`	`false`	Enables typing into the field to filter the list.
`searchMode`	`'contains' \| 'startswith'`	`'contains'`	How typed search text matches an item.
`searchExpr`	`string \| string[] \| ((item) => string)`	—	Which text the filter matches; defaults to the display text.
`minSearchLength`	`number`	`0`	Characters required before the filter narrows the list.
`showDataBeforeSearch`	`boolean`	`false`	Below `minSearchLength`: show the full list (`true`) or nothing (`false`).
`searchTimeout`	`number \| undefined`	—	Debounce before typed text filters the list; `undefined` = config default (250ms). The displayed text is never debounced.
`acceptCustomValue`	`boolean`	`false`	Lets typed text that matches no item become the value (committed on Enter/blur) — see `customItemCreating`.
`groupBy`	`string \| ((item) => string)`	—	Groups flat items under headers; items are re-ordered by first-seen group.
`imageExpr`	`string \| ((item) => string)`	—	Item → image URL rendered before the option text (avatars, flags…). For inline SVG icons use `itemTemplate`.
`showDropDownButton`	`boolean`	`true`	Renders the chevron toggle in the field rail.
`openOnFieldClick`	`boolean`	`true`	Clicking the field opens the popup (select-only mode toggles it).
`loading`	`boolean`	`false`	Shows a loading row instead of items — server-side filtering escape hatch.
`dropdownPlacement`	`OgePopupPlacement`	`'bottom-start'`	Preferred popup side/alignment (flips when cramped).
`dropdownWidth`	`number \| 'anchor'`	`'anchor'`	Popup width: fixed pixels or `'anchor'` to match the field box.
`dropdownMaxHeight`	`number \| undefined`	—	Scrollable list height cap; `undefined` = the CSS default (320px).
`adaptiveMode / adaptiveBreakpoint`	`'auto' \| 'none' / number`	`config: 'none' / 600`	`'auto'` presents the popup as a full-width bottom sheet (with a search field at the top when `searchEnabled`) on viewports narrower than `adaptiveBreakpoint` px — a titled `role="dialog"` surface with a close button, scroll lock, inert background, a Tab trap, focus restore, safe-area insets and 16px / 44px touch sizing; Escape, a backdrop tap or a swipe down the handle dismiss it. `'none'` keeps the anchored drop-down. App-wide defaults come from `provideOgeInputsConfig()`.
`wrapItemText`	`boolean`	`false`	Wraps long option text instead of ellipsizing it.
`useItemTextAsTitle`	`boolean`	`false`	Mirrors each option's display text into its `title` attribute.
`itemTemplate`	`TemplateRef<OgeSelectItemTemplateContext>`	—	Custom option row rendering; context: `$implicit`, `index`, `selected`, `active`.
`virtualScroll`	`boolean \| OgeVirtualScrollOptions`	`false`	Windowed rendering for large lists (`{ itemHeight, overscan }`). Rows get a fixed size-matched height; `groupBy` and `wrapItemText` are ignored while active.
`opened`	`model<boolean>`	`false`	Popup visibility — two-way.
`selectedItem`	`Signal<TItem \| null>`	—	Read-only: the item whose `valueExpr` matches `value`.
`displayText`	`Signal<string>`	—	Read-only: display text of the selected item.

Common — field chrome (all editors)

Name	Type	Default	Description
`label`	`string`	`''`	Field label; placement follows `labelMode`.
`labelMode`	`OgeInputLabelMode`	`'static'`	Label placement: static / floating / hidden (aria-only) / outside.
`stylingMode`	`OgeInputStylingMode`	`'outlined'`	Container fill style.
`size`	`OgeInputSize`	`'md'`	Container height preset — 28/34/42px, the button scale.
`placeholder`	`string`	`''`	Native placeholder text.
`hint`	`string \| undefined`	—	Helper text in the subscript region (hidden while an error shows).
`tooltip`	`string \| undefined`	—	Native `title` attribute of the input element.
`subscriptSizing`	`OgeInputSubscriptSizing`	`'fixed'`	Whether the hint/error line reserves height, collapses, or is removed.
`fluid`	`boolean`	`false`	Stretches the field to 100% width (default 240px via `--oge-input-width`).
`width`	`number \| string \| undefined`	—	This field’s width — a number is px, a string any CSS length. Sets `--oge-input-width` on this host only; `fluid` still wins.
`showClearButton`	`boolean`	`false`	Renders the clear (✕) button while the field has a value.
`showSuccessIcon`	`OgeInputShowSuccessIcon`	`false`	Success icon when valid: `false` / on touch / always.
`id`	`string \| undefined`	—	Base for the generated element ids (input/label/hint/error/counter).
`tabIndex`	`number`	`0`	Tab order of the native input.
`autofocus`	`boolean`	`false`	Focuses the editor after its first render.
`selectOnFocus`	`boolean`	`false`	Selects the whole text when the input receives focus.
`inputAttr`	`Record<string, string>`	`{}`	Escape hatch: extra attributes rendered onto the native input (template-owned attributes are ignored).
`messages`	`Partial<OgeInputsMessages> \| undefined`	—	Per-instance overrides of user-facing strings.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 7

OgeSelectBox methods

Name	Type	Description
`open()`	`void`	Opens the popup (no-op while disabled/readonly).
`close()`	`void`	Closes the popup.
`toggle()`	`void`	Toggles the popup.

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 13

OgeSelectBox events

Name	Type	Description
`selectionChanged`	`OgeSelectBoxSelectionChangedEvent`	The resolved selected item changed (user or programmatic) — `{ item, previousItem }`.
`itemClick`	`OgeSelectBoxItemClickEvent`	An option row was activated — `{ item, index, event }`; `index` is within the visible (filtered) list.
`dropDownOpened / dropDownClosed`	`void`	Popup visibility changes, from any trigger.
`searchChanged`	`OgeSelectBoxSearchChangedEvent`	Raw search text on every keystroke — drive server-side filtering from here.
`customItemCreating`	`OgeSelectBoxCustomItemEvent`	Mutable payload (as in the references): assign `customItem` — an item, a promise of one, or `null` to reject the text. Left unset, the raw text becomes the item.

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

Types 3

Select box types

Name	Type	Description
`OgeSelectBoxDisplayExpr / ValueExpr / DisabledExpr`	`string \| fn`	Field-name string or function expressions for display text, committed value and per-item disabling.
`OgeSelectBoxSearchMode`	`'contains' \| 'startswith'`	Filter match mode.
`OgeSelectItemTemplateContext`	`interface`	`{ $implicit: TItem; index: number; selected: boolean; active: boolean }`.

OgeTreeSelect

oge-tree-select

Properties 19

Value & data

Name	Type	Default	Description
`value`	`RowKey \| readonly RowKey[] \| null`	`null`	Committed value — two-way. The selected node's key in `single` mode, an array of keys in `multiple`.
`items`	`readonly TItem[] \| undefined`	—	Nodes to display — a flat parent-referencing list or nested children.
`keyExpr / parentIdExpr / itemsExpr`	`string \| ((row: TItem) => …)`	—	Identity and structure accessors, forwarded to the popup tree. `itemsExpr` switches to hierarchical data.
`displayExpr`	`string \| ((row: TItem) => unknown)`	`'text'`	Node label, used both in the tree and for the text shown in the closed field.
`disabledExpr / hasItemsExpr / iconExpr / rootValue / dataStructure`	`see OgeTreeView`	—	Forwarded verbatim to the popup tree.

Selection

Name	Type	Default	Description
`selectionMode`	`'single' \| 'multiple'`	`'single'`	`multiple` makes `value` an array and keeps the popup open while picking.
`showCheckBoxes`	`'none' \| 'normal' \| 'selectAll'`	`'none'`	Checkbox column inside the popup.
`selectNodesRecursive`	`boolean`	`true`	Cascades selection down to descendants and up to fully-selected parents.
`selectedKeysMode`	`'all' \| 'leavesOnly' \| 'excludeRecursive'`	`'all'`	Projection applied to the committed keys — `leavesOnly` is usually what you want to store from a cascade.
`displayMode`	`'text' \| 'count'`	`'text'`	Closed-field rendering for a multiple selection: the joined labels, or just how many are picked.

Popup

Name	Type	Default	Description
`opened`	`boolean`	`false`	Whether the popup is open — two-way.
`expandedKeys`	`readonly RowKey[]`	`[]`	Expanded nodes — two-way, so the shape survives close and reopen.
`expandEvent`	`'click' \| 'dblclick'`	`'dblclick'`	Which gesture expands inside the popup. Unlike the bare tree this defaults to `dblclick` — in a picker a single click should choose, and the chevron expands either way.
`searchEnabled / searchMode / filterMode`	`see OgeTreeView`	—	Puts the tree's own search box inside the popup.
`loadChildren`	`(parent: TItem, key: RowKey) => Promise<readonly TItem[]>`	—	Lazy children, fetched on first expand.
`virtualScroll`	`boolean \| { itemHeight: number }`	`false`	Windowed rendering inside the popup for very large trees.
`dropdownPlacement / dropdownWidth / dropdownMaxHeight`	`OgePopupPlacement \| number \| 'anchor'`	—	Popup geometry. Width defaults to `'anchor'` (matches the field), max height to 320px.
`adaptiveMode / adaptiveBreakpoint`	`'auto' \| 'none' / number`	`config: 'none' / 600`	`'auto'` presents the popup as a full-width bottom sheet (a Done action in `'multiple'` mode) on viewports narrower than `adaptiveBreakpoint` px — a titled `role="dialog"` surface with a close button, scroll lock, inert background, a Tab trap, focus restore, safe-area insets and 16px / 44px touch sizing; Escape, a backdrop tap or a swipe down the handle dismiss it. `'none'` keeps the anchored drop-down. App-wide defaults come from `provideOgeInputsConfig()`.
`openOnFieldClick`	`boolean`	`true`	Opens on a click anywhere in the field, not only on the chevron.

Methods 2

Name	Type	Description
`open() / close() / toggle()`	`() => void`	Imperative popup control.
`focus() / blur() / reset() / clear()`	`() => void`	Inherited field-chrome control methods. `clear()` empties the value, commits immediately and keeps focus in the field.

Events 3

Name	Type	Description
`selectionChanged`	`OgeTreeSelectSelectionChangedEvent`	Emitted after the committed selection changed, with `keys` and `previousKeys` (always arrays, even in single mode).
`dropDownOpened / dropDownClosed`	`void`	Popup lifecycle.
`valueCommitted`	`OgeInputValueCommittedEvent`	Inherited commit event carrying the previous value.

Types 3

Name	Type	Description
`OgeTreeSelectSelectionMode`	`'single' \| 'multiple'`	How many nodes may be committed.
`OgeTreeSelectDisplayMode`	`'text' \| 'count'`	Closed-field rendering of a multiple selection.
`OgeTreeSelectSelectionChangedEvent`	`{ keys, previousKeys }`	Payload of `selectionChanged`.

OgeTagBox

oge-tag-box

Properties 39

OgeTagBox

Name	Type	Default	Description
`value`	`model<readonly unknown[]>`	`[]`	Committed values — the `valueExpr` of every selected item; two-way.
`items / displayExpr / valueExpr / disabledExpr / imageExpr`	`shared with OgeSelectBox`	—	The tag box reuses the select box expression vocabulary verbatim.
`searchEnabled / searchMode / searchExpr`	`shared with OgeSelectBox`	—	Client-side filtering of the option list.
`showSelectionControls`	`boolean`	`true`	Renders checkboxes in front of the options.
`hideSelectedItems`	`boolean`	`false`	Hides already-selected items from the popup list.
`maxDisplayedTags`	`number \| undefined`	—	Caps the rendered chips; the rest collapse into a `+N` chip.
`opened / dropdownPlacement / dropdownWidth / dropdownMaxHeight / showDropDownButton / openOnFieldClick`	`shared with OgeSelectBox`	—	Popup configuration and two-way visibility.
`adaptiveMode / adaptiveBreakpoint`	`'auto' \| 'none' / number`	`config: 'none' / 600`	`'auto'` presents the popup as a full-width bottom sheet (search field when `searchEnabled`, picks keep it open, a Done action closes it) on viewports narrower than `adaptiveBreakpoint` px — a titled `role="dialog"` surface with a close button, scroll lock, inert background, a Tab trap, focus restore, safe-area insets and 16px / 44px touch sizing; Escape, a backdrop tap or a swipe down the handle dismiss it. `'none'` keeps the anchored drop-down. App-wide defaults come from `provideOgeInputsConfig()`.
`virtualScroll`	`boolean \| OgeVirtualScrollOptions`	`false`	Windowed rendering for large lists — same contract as the select box.

Common — field chrome (all editors)

Name	Type	Default	Description
`label`	`string`	`''`	Field label; placement follows `labelMode`.
`labelMode`	`OgeInputLabelMode`	`'static'`	Label placement: static / floating / hidden (aria-only) / outside.
`stylingMode`	`OgeInputStylingMode`	`'outlined'`	Container fill style.
`size`	`OgeInputSize`	`'md'`	Container height preset — 28/34/42px, the button scale.
`placeholder`	`string`	`''`	Native placeholder text.
`hint`	`string \| undefined`	—	Helper text in the subscript region (hidden while an error shows).
`tooltip`	`string \| undefined`	—	Native `title` attribute of the input element.
`subscriptSizing`	`OgeInputSubscriptSizing`	`'fixed'`	Whether the hint/error line reserves height, collapses, or is removed.
`fluid`	`boolean`	`false`	Stretches the field to 100% width (default 240px via `--oge-input-width`).
`width`	`number \| string \| undefined`	—	This field’s width — a number is px, a string any CSS length. Sets `--oge-input-width` on this host only; `fluid` still wins.
`showClearButton`	`boolean`	`false`	Renders the clear (✕) button while the field has a value.
`showSuccessIcon`	`OgeInputShowSuccessIcon`	`false`	Success icon when valid: `false` / on touch / always.
`id`	`string \| undefined`	—	Base for the generated element ids (input/label/hint/error/counter).
`tabIndex`	`number`	`0`	Tab order of the native input.
`autofocus`	`boolean`	`false`	Focuses the editor after its first render.
`selectOnFocus`	`boolean`	`false`	Selects the whole text when the input receives focus.
`inputAttr`	`Record<string, string>`	`{}`	Escape hatch: extra attributes rendered onto the native input (template-owned attributes are ignored).
`messages`	`Partial<OgeInputsMessages> \| undefined`	—	Per-instance overrides of user-facing strings.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 5

OgeTagBox methods

Name	Type	Description
`open() / close() / toggle()`	`void`	Popup control (no-ops while disabled/readonly).

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 11

OgeTagBox events

Name	Type	Description
`selectionChanged`	`OgeTagBoxSelectionChangedEvent`	Per-commit delta — `{ addedItems, removedItems }`.
`itemClick`	`OgeTagBoxItemClickEvent`	An option row was toggled — `{ item, index, event }`.
`dropDownOpened / dropDownClosed`	`void`	Popup visibility changes, from any trigger.

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

OgeAutocomplete

oge-autocomplete

Properties 45

OgeAutocomplete

Name	Type	Default	Description
`value`	`model<string>`	`''`	The typed text — the committed value is the string itself, not an item value; two-way.
`items`	`readonly TItem[] \| OgeSelectBoxItemsFn`	`[]`	The suggestion items: an array, or a function invoked lazily on first open (sync or promise; loading/error rows render while pending).
`displayExpr / disabledExpr / imageExpr / searchExpr / searchMode / groupBy / itemTemplate`	`shared with OgeSelectBox`	—	The autocomplete reuses the select box expression vocabulary and list rendering verbatim (no `valueExpr` — the value is text).
`minSearchLength`	`number`	`1`	Characters required before suggestions open while typing; deleting below the threshold closes the list.
`maxItemCount`	`number`	`10`	Caps the rendered suggestion list.
`searchTimeout`	`number \| undefined`	—	Debounce before typed text filters the list; `undefined` = config default (250ms). The displayed text is never debounced.
`forceSelection`	`boolean`	`false`	Reverts non-matching text to the last committed value on blur; an exact display match resolves to the item with its canonical casing.
`searchHighlight`	`boolean`	`true`	Marks the matched part of each suggestion (`<mark>`).
`showDropDownButton`	`boolean`	`false`	Renders the chevron toggle in the field rail (off by default — reference parity).
`openOnFieldClick`	`boolean`	`false`	Clicking the field opens the suggestion list.
`loading / dropdownPlacement / dropdownWidth / dropdownMaxHeight / wrapItemText / useItemTextAsTitle`	`shared with OgeSelectBox`	—	Popup configuration and list rendering.
`adaptiveMode / adaptiveBreakpoint`	`'auto' \| 'none' / number`	`config: 'none' / 600`	`'auto'` presents the popup as a full-width bottom sheet with its own text field at the top on viewports narrower than `adaptiveBreakpoint` px — a titled `role="dialog"` surface with a close button, scroll lock, inert background, a Tab trap, focus restore, safe-area insets and 16px / 44px touch sizing; Escape, a backdrop tap or a swipe down the handle dismiss it. `'none'` keeps the anchored drop-down. App-wide defaults come from `provideOgeInputsConfig()`.
`virtualScroll`	`boolean \| OgeVirtualScrollOptions`	`false`	Windowed rendering for large lists — same contract as the select box.
`opened`	`model<boolean>`	`false`	Popup visibility — two-way.
`selectedItem`	`Signal<TItem \| null>`	—	Read-only: the last picked suggestion; `null` once the text diverges from it.

Common — field chrome (all editors)

Name	Type	Default	Description
`label`	`string`	`''`	Field label; placement follows `labelMode`.
`labelMode`	`OgeInputLabelMode`	`'static'`	Label placement: static / floating / hidden (aria-only) / outside.
`stylingMode`	`OgeInputStylingMode`	`'outlined'`	Container fill style.
`size`	`OgeInputSize`	`'md'`	Container height preset — 28/34/42px, the button scale.
`placeholder`	`string`	`''`	Native placeholder text.
`hint`	`string \| undefined`	—	Helper text in the subscript region (hidden while an error shows).
`tooltip`	`string \| undefined`	—	Native `title` attribute of the input element.
`subscriptSizing`	`OgeInputSubscriptSizing`	`'fixed'`	Whether the hint/error line reserves height, collapses, or is removed.
`fluid`	`boolean`	`false`	Stretches the field to 100% width (default 240px via `--oge-input-width`).
`width`	`number \| string \| undefined`	—	This field’s width — a number is px, a string any CSS length. Sets `--oge-input-width` on this host only; `fluid` still wins.
`showClearButton`	`boolean`	`false`	Renders the clear (✕) button while the field has a value.
`showSuccessIcon`	`OgeInputShowSuccessIcon`	`false`	Success icon when valid: `false` / on touch / always.
`id`	`string \| undefined`	—	Base for the generated element ids (input/label/hint/error/counter).
`tabIndex`	`number`	`0`	Tab order of the native input.
`autofocus`	`boolean`	`false`	Focuses the editor after its first render.
`selectOnFocus`	`boolean`	`false`	Selects the whole text when the input receives focus.
`inputAttr`	`Record<string, string>`	`{}`	Escape hatch: extra attributes rendered onto the native input (template-owned attributes are ignored).
`messages`	`Partial<OgeInputsMessages> \| undefined`	—	Per-instance overrides of user-facing strings.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 5

OgeAutocomplete methods

Name	Type	Description
`open() / close() / toggle()`	`void`	Popup control (no-ops while disabled/readonly).

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 12

OgeAutocomplete events

Name	Type	Description
`selectionChanged`	`OgeAutocompleteSelectionChangedEvent`	A suggestion was picked or the selection was canceled — `{ item: TItem \| null, event? }`.
`itemClick`	`OgeAutocompleteItemClickEvent`	A suggestion row was activated — `{ item, index, event }`.
`dropDownOpened / dropDownClosed`	`void`	Popup visibility changes, from any trigger.
`searchChanged`	`OgeSelectBoxSearchChangedEvent`	Raw search text on every keystroke — drive server-side filtering from here.

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

Types 2

Autocomplete types

Name	Type	Description
`OgeAutocompleteSelectionChangedEvent`	`interface`	`{ item: TItem \| null; event?: Event }` — `null` means the selection was canceled.
`OgeVirtualScrollOptions`	`interface`	`{ itemHeight?: number; overscan?: number }`; default heights come from `OGE_SELECT_OPTION_HEIGHT` (28/34/40px for sm/md/lg).

OgeCheckBox

oge-check-box

Properties 18

OgeCheckBox

Name	Type	Default	Description
`label`	`string`	`''`	Text rendered beside the control.
`value`	`model<boolean \| null>`	`false`	`true`/`false`, or `null` for the indeterminate (dash) state — two-way. `null` renders regardless of `threeState`.
`threeState`	`boolean`	`false`	Lets users cycle into the indeterminate state: `null → true → false → null` (the reference cycle).
`text`	`string`	`''`	Label text; the default `<ng-content>` slot renders when unset.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Glyph/font size preset.
`tooltip`	`string \| undefined`	—	Native `title` on the label element.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 5

OgeCheckBox methods

Name	Type	Description
`toggle(): void`	`void`	Advances the state exactly like a user click (respects `threeState`, no-op while disabled/readonly).

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 8

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

OgeSlider

oge-slider

Properties 25

OgeSlider

Name	Type	Default	Description
`value`	`model<number>`	`0`	The slider value — two-way. Programmatic writes clamp and snap to the step grid.
`min / max`	`number \| undefined`	`0 / 100`	Scale bounds. Typed `number \| undefined` because the Signal Forms contract reserves these member names — `undefined` falls back to 0/100.
`step`	`number`	`1`	Arrow-key and drag increment; thumbs always sit on this grid, with float-error correction (0.1-style steps never drift).
`largeStep`	`number \| undefined`	—	PageUp/PageDown increment; `undefined` means `step × 10`.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	A vertical slider announces `aria-orientation="vertical"`; Up still increases (APG).
`showRange`	`boolean`	`true`	Fills the selected portion of the track.
`showTicks / tickStep`	`boolean / number \| undefined`	`false`	Tick marks on the `tickStep` grid — falling back to `largeStep`, then `step`; capped at 200 marks.
`showTickLabels`	`boolean`	`false`	Formatted labels under each tick (Kendo's tick `title` callback, fed by `formatValue`).
`showLabels`	`boolean`	`false`	Formatted `min`/`max` labels at the track ends.
`valueIndicator`	`'none' \| 'active' \| 'always'`	`'none'`	The inline value bubble: `'active'` while focused, dragged or hovered (Material's discrete plus DevExtreme's `showMode: 'onHover'`), `'always'` permanent.
`formatValue`	`(value: number) => string \| undefined`	—	Formats the bubble, the end labels and `aria-valuetext` — display and announcement never diverge.
`showButtons`	`boolean`	`false`	Kendo-style increment/decrement buttons with press-and-hold repeat — the number box's spin timing config.
`ariaLabel`	`string \| undefined`	—	Accessible name of the thumb; the localized `sliderHandle` message is the fallback.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 4

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 10

OgeSlider events

Name	Type	Description
`dragStarted`	`OgeSliderDragStartedEvent`	A drag gesture began on the thumb or the track.
`slideEnded`	`OgeSliderSlideEndedEvent<number>`	Fires once per gesture at release — DevExtreme's `onHandleRelease` timing without a mode switch (live changes stream through `valueCommitted`, throttled by `debounce`). Not emitted when Escape cancels the gesture.

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

Types 3

Name	Type	Description
`OgeSliderOrientation`	`'horizontal' \| 'vertical'`	Axis the track lays along.
`OgeSliderValueIndicator`	`'none' \| 'active' \| 'always'`	When the inline value bubble shows.
`OgeSliderDragStartedEvent / OgeSliderSlideEndedEvent<T>`	`{ event } / { value; event }`	The drag gesture pair.

OgeRangeSlider

oge-range-slider

Properties 17

OgeRangeSlider

Name	Type	Default	Description
`value`	`model<readonly [number, number]>`	`[0, 0]`	The `[start, end]` pair — two-way. Programmatic writes clamp, snap and sort.
`minRange`	`number`	`0`	Minimum distance kept between the thumbs — reflected in each thumb’s dynamic `aria-valuemin`/`aria-valuemax` (the APG multi-thumb constraint).
`startAriaLabel / endAriaLabel`	`string \| undefined`	—	Accessible names of the thumbs; the localized `sliderStartHandle`/`sliderEndHandle` messages are the fallbacks.
`startName / endName`	`string`	`''`	Hidden-input names for plain HTML form posts — DevExtreme's `startName`/`endName` contract (the single slider uses the inherited `name`).

Shared with OgeSlider

Name	Type	Default	Description
`min / max / step / largeStep / orientation / showRange / showTicks / tickStep / showLabels / valueIndicator / formatValue`	`—`	—	The full scale/appearance surface of `OgeSlider`, identical semantics. `showButtons` is single-slider only (the Kendo split). Clicking the track moves the nearest thumb.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 4

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 9

OgeRangeSlider events

Name	Type	Description
`dragStarted / slideEnded`	`OgeSliderSlideEndedEvent<readonly [number, number]>`	The drag gesture pair; an unchanged pair never re-emits `valueCommitted`.

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

OgeSwitch

oge-switch

Properties 16

OgeSwitch

Name	Type	Default	Description
`value`	`model<boolean>`	`false`	The on/off state — two-way.
`label`	`string`	`''`	Accessible name (`aria-label`).
`onText / offText`	`string \| undefined`	—	Track texts; `undefined` falls back to the localized `switchOn`/`switchOff` messages ('ON'/'OFF'), empty strings hide the text.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Track size preset.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 5

OgeSwitch methods

Name	Type	Description
`toggle(): void`	`void`	Flips the state (no-op while disabled/readonly).

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 8

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

OgeRadioGroup

oge-radio-group

Properties 19

OgeRadioGroup

Name	Type	Default	Description
`value`	`model<unknown>`	`null`	The selected item's `valueExpr` result; two-way.
`items`	`readonly TItem[]`	`[]`	The selectable items.
`displayExpr / valueExpr / disabledExpr`	`shared with OgeSelectBox`	—	Field-name string or function expressions — the select box vocabulary.
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	Column or row arrangement.
`label`	`string`	`''`	Accessible name of the group (`aria-label`).
`itemTemplate`	`TemplateRef<OgeSelectItemTemplateContext>`	—	Custom item rendering next to the radio dot; context: `$implicit`, `index`, `selected`, `active`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Dot/font size preset.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 4

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 9

OgeRadioGroup events

Name	Type	Description
`itemClick`	`OgeRadioGroupItemClickEvent`	A radio item was activated by click or keyboard — `{ item, index, event }`.

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

OgeCalendar

oge-calendar

Properties 29

Slot & locale helper

Name	Type	Default	Description
`*ogeCalendarCellTemplate`	`OgeCalendarCellTemplate`	—	Replaces the default day-cell rendering — badges, prices, availability dots. Also usable on `oge-date-box` and `oge-date-range-box`, which project into the same calendar.
`datePartOrder(locale, kind)`	`(locale: string \| undefined, kind: 'date' \| 'datetime' \| 'time') => string[]`	—	The order a locale writes date parts in, derived from `Intl`. Drives locale-aware typed parsing; exported so consumers can build their own date editors on the same rules.

OgeCalendar

Name	Type	Default	Description
`label`	`string`	`''`	Accessible name of the grid (`aria-label`); the messages supply a default.
`value`	`model<Date \| null>`	`null`	The selected day (single mode) — two-way, local Date.
`values`	`model<readonly Date[]>`	`[]`	Selected days for `selectionMode: 'multiple'` — two-way.
`selectionMode`	`'single' \| 'multiple' \| 'range'`	`'single'`	Range mode picks a start–end pair with a live hover preview.
`range`	`model<[Date \| null, Date \| null]>`	`[null, null]`	The selected tuple for `selectionMode: 'range'` — two-way; either end may stay open.
`viewsCount`	`1 \| 2`	`1`	Side-by-side month views (2 is the range layout).
`zoomLevel / minZoomLevel / maxZoomLevel`	`'month' \| 'year' \| 'decade'`	`'month' / 'decade' / 'month'`	Drill level (two-way) and its reachable bounds; dx's 'century' is deliberately dropped.
`min / max`	`Date \| undefined`	—	Day bounds; `undefined` = unbounded (no dx 1000–3000 defaults).
`disabledDates`	`Date[] \| ((d: Date) => boolean)`	—	Individual unselectable days.
`firstDayOfWeek`	`number \| undefined`	—	0–6 (Sunday-first); `undefined` resolves from the locale's Intl week info.
`showWeekNumbers`	`boolean \| { rule: 'firstDay' \| 'firstFourDays' \| 'fullWeek' }`	`false`	Week-number column; `true` = the ISO rule.
`showTodayButton`	`boolean`	`false`	Renders the localized today shortcut.
`focusedDate`	`model<Date \| null>`	—	The keyboard-focused day — two-way (controlled navigation).
`locale`	`string \| undefined`	—	BCP 47 locale for all texts (Intl).
`cellTemplate`	`TemplateRef<OgeCalendarCellTemplateContext>`	—	Custom cell rendering — also available as the projected `[ogeCalendarCellTemplate]` slot.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 4

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 9

OgeCalendar events

Name	Type	Description
`cellClick`	`OgeCalendarCellClickEvent`	A day/month/year cell was activated — `{ date, view, event }`.

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

OgeDateBox

oge-date-box

Properties 49

OgeDateBox

Name	Type	Default	Description
`dropdownPlacement`	`OgePopupPlacement`	`'bottom-start'`	Preferred popup side/alignment; flips when it would clip.
`adaptiveMode / adaptiveBreakpoint`	`'auto' \| 'none' / number`	`config: 'none' / 600`	`'auto'` presents the popup as a full-screen dialog with 44px day cells on viewports narrower than `adaptiveBreakpoint` px — a titled `role="dialog"` surface with a close button, scroll lock, inert background, a Tab trap, focus restore, safe-area insets and 16px / 44px touch sizing; Escape, a backdrop tap or a swipe down the handle dismiss it. `'none'` keeps the anchored drop-down. App-wide defaults come from `provideOgeInputsConfig()`.
`showDropDownButton`	`boolean`	`true`	Renders the rail button that toggles the picker; the field click and the keyboard still open it when hidden.
`value`	`model<Date \| null>`	`null`	Always a local `Date` — serialization is the app's concern (no `dateSerializationFormat`). CVA writes accept ISO-like strings and epoch numbers leniently.
`type`	`'date' \| 'time' \| 'datetime'`	`'date'`	Picker: calendar, interval time list, or both (no dx `pickerType`). The rail icon follows the type.
`displayFormat`	`Intl.DateTimeFormatOptions \| ((d: Date) => string)`	—	Display text; `undefined` = per-type Intl defaults. No format strings, no date library.
`min / max / disabledDates`	`as OgeCalendar`	—	Out-of-range typed text marks the field invalid — it is never clamped (unlike the number box).
`interval`	`number`	`30`	Time list step in minutes.
`timeView`	`'list' \| 'columns'`	`'list'`	Time picker layout: one interval list, or hour + minute columns.
`applyValueMode`	`'instantly' \| 'useButtons'`	`'instantly'`	OK/Cancel footer collects picker changes in a draft when `useButtons`.
`acceptCustomValue`	`boolean`	`true`	`false` makes the text read-only (picker input only).
`openOnFieldClick`	`boolean`	`true`	Clicking the field opens the picker.
`firstDayOfWeek / showWeekNumbers / zoomLevel / calendarCellTemplate / locale`	`calendar passthroughs`	—	Exposed individually — no `calendarOptions` kitchen-sink object.
`opened`	`model<boolean>`	`false`	Picker visibility — two-way.

OgeDateRangeBox

Name	Type	Default	Description
`value`	`model<[Date \| null, Date \| null]>`	`[null, null]`	Start–end tuple on one field: two parsed inputs + a two-view range calendar popup. A reversed pair reorders on commit; either end may stay open.
`type`	`'date' \| 'datetime'`	`'date'`	`'datetime'` adds start/end time lists to the picker: day and time picks collect in a draft and commit together on OK; both sides parse and render times.
`interval`	`number`	`30`	Time list step in minutes (`type: 'datetime'`).
`min / max / disabledDates / firstDayOfWeek / showWeekNumbers / locale / displayFormat / openOnFieldClick / acceptCustomValue`	`as OgeDateBox`	—	Shared configuration surface.
`adaptiveMode / adaptiveBreakpoint`	`'auto' \| 'none' / number`	`config: 'none' / 600`	`'auto'` presents the popup as a full-screen dialog showing one month, where picking both ends waits for an explicit Done that applies the range on viewports narrower than `adaptiveBreakpoint` px — a titled `role="dialog"` surface with a close button, scroll lock, inert background, a Tab trap, focus restore, safe-area insets and 16px / 44px touch sizing; Escape, a backdrop tap or a swipe down the handle dismiss it. `'none'` keeps the anchored drop-down. App-wide defaults come from `provideOgeInputsConfig()`.

Common — field chrome (all editors)

Name	Type	Default	Description
`label`	`string`	`''`	Field label; placement follows `labelMode`.
`labelMode`	`OgeInputLabelMode`	`'static'`	Label placement: static / floating / hidden (aria-only) / outside.
`stylingMode`	`OgeInputStylingMode`	`'outlined'`	Container fill style.
`size`	`OgeInputSize`	`'md'`	Container height preset — 28/34/42px, the button scale.
`placeholder`	`string`	`''`	Native placeholder text.
`hint`	`string \| undefined`	—	Helper text in the subscript region (hidden while an error shows).
`tooltip`	`string \| undefined`	—	Native `title` attribute of the input element.
`subscriptSizing`	`OgeInputSubscriptSizing`	`'fixed'`	Whether the hint/error line reserves height, collapses, or is removed.
`fluid`	`boolean`	`false`	Stretches the field to 100% width (default 240px via `--oge-input-width`).
`width`	`number \| string \| undefined`	—	This field’s width — a number is px, a string any CSS length. Sets `--oge-input-width` on this host only; `fluid` still wins.
`showClearButton`	`boolean`	`false`	Renders the clear (✕) button while the field has a value.
`showSuccessIcon`	`OgeInputShowSuccessIcon`	`false`	Success icon when valid: `false` / on touch / always.
`id`	`string \| undefined`	—	Base for the generated element ids (input/label/hint/error/counter).
`tabIndex`	`number`	`0`	Tab order of the native input.
`autofocus`	`boolean`	`false`	Focuses the editor after its first render.
`selectOnFocus`	`boolean`	`false`	Selects the whole text when the input receives focus.
`inputAttr`	`Record<string, string>`	`{}`	Escape hatch: extra attributes rendered onto the native input (template-owned attributes are ignored).
`messages`	`Partial<OgeInputsMessages> \| undefined`	—	Per-instance overrides of user-facing strings.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 5

OgeDateBox methods

Name	Type	Description
`open() / close() / toggle()`	`void`	Picker control (no-ops while disabled/readonly).

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 9

OgeDateBox events

Name	Type	Description
`dropDownOpened / dropDownClosed`	`void`	Picker visibility changes, from any trigger.

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

Types 2

Date types

Name	Type	Description
`parseDateText(text, locale, kind, reference?)`	`function`	Exported: locale-aware text → local `Date \| null` via Intl part order — never `Date.parse`.
`OgeDateBoxType / OgeDateBoxApplyValueMode / OgeDateBoxDisplayFormat / OgeDateBoxTimeView`	`types`	The string unions and the display-format shape.

OgeColorBox

oge-color-box

Properties 46

OgeColorBox

Name	Type	Default	Description
`dropdownPlacement`	`OgePopupPlacement`	`'bottom-start'`	Preferred popup side/alignment; flips when it would clip.
`adaptiveMode / adaptiveBreakpoint`	`'auto' \| 'none' / number`	`config: 'none' / 600`	`'auto'` presents the popup as a full-width bottom sheet on viewports narrower than `adaptiveBreakpoint` px — a titled `role="dialog"` surface with a close button, scroll lock, inert background, a Tab trap, focus restore, safe-area insets and 16px / 44px touch sizing; Escape, a backdrop tap or a swipe down the handle dismiss it. `'none'` keeps the anchored drop-down. App-wide defaults come from `provideOgeInputsConfig()`.
`showDropDownButton`	`boolean`	`true`	Renders the rail button that toggles the picker; the field click and the keyboard still open it when hidden.
`value`	`model<string \| null>`	`null`	The committed color as a CSS string, normalized to `format` on user commits. Programmatic writes keep any parseable CSS color verbatim (never reformatted); unparseable writes land as `null`.
`format`	`'hex' \| 'rgb' \| 'rgba' \| 'hsl'`	`'hex'`	Committed string shape (hex — the DevExtreme default; Kendo defaults to rgba). Translucent colors widen to carry alpha: `#rrggbbaa` / `rgba()` / `hsla()`.
`view`	`'gradient' \| 'palette' \| 'both'`	`'gradient'`	Popup surfaces: the saturation/brightness gradient with sliders and inputs, the swatch palette, or both stacked — no view switcher (Kendo's `activeView` is deliberately skipped).
`editAlphaChannel`	`boolean`	`false`	Adds the alpha slider + percent input and lets the output carry alpha. Without it, alpha is coerced to 1 on commit — `rgba()` text still parses.
`applyValueMode`	`'instantly' \| 'useButtons'`	`'instantly'`	OK/Cancel footer collects panel interactions in a draft when `useButtons`; the default commits live (dragging streams through `valueCommitted`, throttled by `debounce`).
`acceptCustomValue`	`boolean`	`true`	`false` makes the text read-only (picker input only). Typed text parses any CSS color incl. the 148 named colors; unparseable text reverts on blur.
`keyStep`	`number`	`5`	Arrow-key increment of the panel parts in value units — hue degrees, alpha percent, surface saturation/brightness percent. PageUp/PageDown move by 5× (value-space, not Kendo’s pixel steps — zoom-independent).
`palette`	`readonly string[] \| undefined`	—	Palette swatches as CSS color strings; `undefined` renders the exported `OGE_DEFAULT_COLOR_PALETTE`. Unparseable entries are dropped.
`paletteColumns`	`number`	`10`	Swatch columns of the palette grid.
`openOnFieldClick`	`boolean`	`true`	Clicking the field opens the picker.
`showDropDownButton`	`boolean`	`true`	`false` hides the rail chevron — field click and ArrowDown still open.
`showEyedropper`	`boolean`	`true`	The eyedropper button (pick a color from anywhere on screen) — rendered only in browsers shipping the `EyeDropper` API; progressive enhancement, no polyfill. The picked color keeps the working alpha.
`opened`	`model<boolean>`	`false`	Picker visibility — two-way.

Common — field chrome (all editors)

Name	Type	Default	Description
`label`	`string`	`''`	Field label; placement follows `labelMode`.
`labelMode`	`OgeInputLabelMode`	`'static'`	Label placement: static / floating / hidden (aria-only) / outside.
`stylingMode`	`OgeInputStylingMode`	`'outlined'`	Container fill style.
`size`	`OgeInputSize`	`'md'`	Container height preset — 28/34/42px, the button scale.
`placeholder`	`string`	`''`	Native placeholder text.
`hint`	`string \| undefined`	—	Helper text in the subscript region (hidden while an error shows).
`tooltip`	`string \| undefined`	—	Native `title` attribute of the input element.
`subscriptSizing`	`OgeInputSubscriptSizing`	`'fixed'`	Whether the hint/error line reserves height, collapses, or is removed.
`fluid`	`boolean`	`false`	Stretches the field to 100% width (default 240px via `--oge-input-width`).
`width`	`number \| string \| undefined`	—	This field’s width — a number is px, a string any CSS length. Sets `--oge-input-width` on this host only; `fluid` still wins.
`showClearButton`	`boolean`	`false`	Renders the clear (✕) button while the field has a value.
`showSuccessIcon`	`OgeInputShowSuccessIcon`	`false`	Success icon when valid: `false` / on touch / always.
`id`	`string \| undefined`	—	Base for the generated element ids (input/label/hint/error/counter).
`tabIndex`	`number`	`0`	Tab order of the native input.
`autofocus`	`boolean`	`false`	Focuses the editor after its first render.
`selectOnFocus`	`boolean`	`false`	Selects the whole text when the input receives focus.
`inputAttr`	`Record<string, string>`	`{}`	Escape hatch: extra attributes rendered onto the native input (template-owned attributes are ignored).
`messages`	`Partial<OgeInputsMessages> \| undefined`	—	Per-instance overrides of user-facing strings.

Common — state & forms (all editors)

Name	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the editor.
`readonly`	`boolean`	`false`	Focusable but not editable. (Contract name — not `readOnly`.)
`required`	`boolean`	`false`	Marks the field required (label asterisk + validation).
`name`	`string`	`''`	Native `name` attribute.
`invalid`	`boolean`	`false`	External invalid override — combined with forms state.
`pending`	`boolean`	`false`	Async-validation indicator; a spinner shows in the rail while `true`.
`touched`	`boolean`	`false`	External touched override (Signal Forms contract).
`dirty`	`boolean`	`false`	External dirty override (Signal Forms contract).
`errors`	`readonly OgeFieldError[]`	`[]`	Signal Forms validation errors (auto-bound by `[formField]`).
`errorText`	`string \| undefined`	—	Explicit error message — always wins over resolved messages.
`errorDisplay`	`OgeInputErrorDisplay`	`'touched'`	When resolved errors become visible.
`debounce`	`number \| undefined`	—	Commit delay in ms for `value`/forms updates; blur and Enter flush immediately.

Methods 5

OgeColorBox methods

Name	Type	Description
`open() / close() / toggle()`	`void`	Picker control (no-ops while disabled/readonly).

Common (all editors)

Name	Type	Description
`focus(): void`	`void`	Moves keyboard focus to the native input.
`blur(): void`	`void`	Blurs the native input.
`clear(): void`	`void`	Clears the value (commits immediately), keeps focus in the field; no-op when disabled/readonly.
`reset(value?: T): void`	`void`	Returns the field to pristine: sets `value` (default: empty), clears touched/dirty/parse errors, cancels pending commits. On a reactive-forms-bound editor resets the control itself.

Events 9

OgeColorBox events

Name	Type	Description
`dropDownOpened / dropDownClosed`	`void`	Picker visibility changes, from any trigger.

Common (all editors)

Name	Type	Description
`valueCommitted`	`OgeInputValueCommittedEvent<T>`	Every committed change with `previousValue` + originating DOM event (`undefined` for programmatic writes) — the reference `onValueChanged` shape.
`inputChange`	`OgeInputRawEvent`	Raw text on every keystroke, regardless of commit policy.
`cleared`	`void`	Value cleared via the clear button / `clear()`.
`enterKey`	`OgeInputKeyEvent`	Enter pressed inside the editor (pending debounce is flushed first).
`focused`	`OgeInputFocusEvent`	The editor received focus.
`blurred`	`OgeInputFocusEvent`	The editor lost focus.
`touch`	`void`	Signal Forms `FormValueControl` contract — emitted once per blur.
`valueChange`	`T`	Implicit output of the `value` model.

Types 4

Color types

Name	Type	Description
`OgeColorBoxView / OgeColorBoxApplyValueMode`	`types`	The string unions of `view` and `applyValueMode`.
`OGE_DEFAULT_COLOR_PALETTE`	`readonly string[]`	The built-in 50-swatch palette used when `palette` is not set.
`Color messages`	`OgeInputsMessages keys`	All popup strings localize through the family config: `colorPickerLabel`, `hueSliderLabel`/`hueValueText`, `alphaSliderLabel`/`alphaValueText`, `colorSurfaceLabel`/`colorSurfaceRoleDescription`/`surfaceValueText`, `paletteLabel`, the hex/R/G/B/A input labels, `eyedropperButton` and `invalidColorError`.
`parseColor / formatColor / normalizeColor / rgbaToHsva / hsvaToRgba / relativeLuminance / contrastForeground / colorsEqual`	`@oge-ui/core`	The DOM-free color kernel (`OgeRgba` / `OgeHsva` / `OgeColorFormat`): CSS color-text parsing, HSV↔RGB conversion, canonical formatting and the WCAG swatch-contrast decision — unit-tested without a DOM, the slider-math precedent.

Shared input types

Types 23

Unions & contracts

Name	Type	Description
`OgeInputLabelMode`	`'static' \| 'floating' \| 'hidden' \| 'outside'`	`hidden` renders the label as `aria-label` only.
`OgeInputStylingMode`	`'outlined' \| 'filled' \| 'underlined'`	Container fill style.
`OgeInputSize`	`'sm' \| 'md' \| 'lg'`	28 / 34 / 42px heights.
`OgeInputSubscriptSizing`	`'fixed' \| 'dynamic' \| 'none'`	`fixed` reserves one line so errors never shift layout.
`OgeInputErrorDisplay`	`'touched' \| 'dirty' \| 'always'`	When resolved errors become visible.
`OgeInputCounterMode`	`'limit' \| 'soft'`	`soft` allows typing past `maxLength` and colors the counter danger.
`OgeInputShowSuccessIcon`	`false \| 'touched' \| 'always'`	Success-icon visibility policy.
`OgeTextBoxMode`	`'text' \| 'email' \| 'password' \| 'search' \| 'tel' \| 'url'`	Native input type of the text box.
`OgeNumberBoxMode`	`'text' \| 'tel'`	Native input type of the number box.
`OgeFieldError`	`{ kind: string; message?: string }`	Structural mirror of Signal Forms' `ValidationError`.

Event payloads

Name	Type	Description
`OgeInputValueCommittedEvent<T>`	`{ value: T; previousValue: T; event: Event \| undefined }`	`event === undefined` means a programmatic change.
`OgeInputRawEvent`	`{ text: string; event: Event }`	Raw keystroke payload.
`OgeInputKeyEvent`	`{ event: KeyboardEvent }`	Enter-key payload.
`OgeInputFocusEvent`	`{ event: FocusEvent }`	Focus/blur payload.

Slots & helpers

Name	Type	Description
`OgeInputPrefix`	`directive — [ogeInputPrefix]`	Leading adornment inside the field.
`OgeInputSuffix`	`directive — [ogeInputSuffix]`	Trailing adornment; renders after the built-in rail buttons.
`resolveErrorMessage(sfErrors, cvaErrors, messages)`	`string \| null`	The single message a field displays. Signal Forms errors win over reactive-forms errors, and an explicit `message` wins over the kind→message map. Exported so a form-level error summary reads exactly like the inline text.
`formatPattern(pattern, values)`	`string`	Interpolates `{token}` placeholders in a message — the same contract the grid uses for its message patterns.
`OgeInputCounterState`	`{ count: number; max: number \| undefined; over: boolean }`	Counter state rendered in the subscript end slot.
`OgeInputRevealApi`	`{ visible; active; toggle() }`	Password-reveal API (text box only).
`OgeInputCopyApi`	`{ visible; copied; trigger() }`	Copy-to-clipboard API (text box only).
`OgeInputSpinApi`	`{ visible; canUp; canDown; press(dir, event); release() }`	Spin-button API (number box only).
`measureTextAreaHeight(el, minRows, maxRows?)`	`number`	Fallback auto-resize measurement for browsers without CSS `field-sizing: content`.

Inputs configuration

Methods 1

Name	Type	Description
`provideOgeInputsConfig(config: OgeInputsConfigInput): Provider`	`Provider`	Application- or component-scoped defaults; deep-merges `messages` over the defaults.

Types 20

OgeInputsConfig

Name	Type	Default	Description
`spinRepeatDelayMs`	`number`	`400`	Delay before spin buttons start repeating.
`spinRepeatIntervalMs`	`number`	`80`	Interval between spin repeats.
`copiedResetMs`	`number`	`2000`	How long the copy button shows "copied".
`adaptiveMode`	`'auto' \| 'none'`	`'none'`	Default `adaptiveMode` of every popup editor (select box, tag box, autocomplete, tree select, date / date range / color box). `'none'` keeps existing apps' anchored drop-downs; switch the whole family with `'auto'`.
`adaptiveBreakpoint`	`number`	`600`	Viewport width (px) below which `'auto'` presents popups as bottom sheets / full-screen dialogs.
`messages`	`OgeInputsMessages`	—	User-facing strings (see below).

OgeInputsMessages

Name	Type	Default	Description
`clearButton`	`string`	`'Clear'`	Aria label of the clear (✕) button.
`showPassword / hidePassword`	`string`	`'Show password' / 'Hide password'`	Reveal toggle aria labels.
`copyButton / copied`	`string`	`'Copy to clipboard' / 'Copied'`	Copy button aria label and transient confirmation.
`spinIncrement / spinDecrement`	`string`	`'Increase value' / 'Decrease value'`	Aria labels of the spin buttons.
`pending / valid`	`string`	`'Validating' / 'Valid'`	Screen-reader text next to the pending spinner / success icon.
`counter / counterNoMax`	`string`	`'{count}/{max}' / '{count}'`	Visual counter patterns.
`counterAria / counterAriaNoMax`	`string`	`'{count} of {max} characters used' / '{count} characters entered'`	Counter aria labels.
`requiredError`	`string`	`'This field is required'`	Resolved message for the `required` error kind.
`emailError`	`string`	`'Enter a valid email address'`	Resolved message for the `email` error kind.
`minError / maxError`	`string`	`'Value must be at least {min}' / '…at most {max}'`	Numeric bound errors.
`minLengthError / maxLengthError`	`string`	`'Enter at least {requiredLength} characters' / 'Enter no more than…'`	Length errors.
`patternError`	`string`	`'The value has an invalid format'`	Pattern mismatch.
`invalidNumberError`	`string`	`'Enter a valid number'`	Number box parse failure (reverts on blur).
`invalidError`	`string`	`'Invalid value'`	Fallback for unknown validation error kinds.

Notes

All editors implement both classic ControlValueAccessor and Signal Forms' FormValueControl — the readonly/errors/touch names are fixed by that contract.
(valueCommitted) is the reference onValueChanged equivalent; native keydown/paste/cut bubble from the inner input and can be bound on the host element directly.
The suffix rail order is a contract: prefix · input · pending⊻success · copy · reveal · clear · spin · suffix.