hx components Input

HxInput / HxWithCheckInput

Text and password input. Created via HxInputBox(HxInputInner) — a HOC that wraps <input> with prefix/suffix/placeholder slots.

HxWithCheckInput adds validation (see WithCheck).

// Basic text
<HxInput $model={form} $field="username" placeholder="Enter username" />

// Password with visibility toggle (built-in)
<HxInput $model={form} $field="password" type="password" />

// Prefix/suffix adornments
<HxInput
  $model={form} $field="search"
  prefix={<MagnifyingGlass />}
  suffix={<Clear onClick={reset} />}
/>

// Deferred update (emit only on blur)
<HxInput $model={form} $field="title" emitChangeOnBlur />

// Debounced update
<HxInput $model={form} $field="query" emitChangeDelay={300} />

// Disabled / readonly
<HxInput $model={form} $field="name" $disabled={(m) => m.locked} />
<HxInput $model={form} $field="code" $readonly={(m) => m.autoGenerated} />

Props

HxInputBox HOC (outer wrapper)

Prop	Type	Default	Description
$model	HxObject<T>	—	Reactive model
$field	ModelPath<T> | HxDataPath	—	Model field path
placeholder	ReactNode	—	Overlay placeholder positioned via ResizeObserver
prefix	ReactNode	—	Element rendered before the <input>
suffix	ReactNode	—	Element rendered after the <input>
$disabled	DisabledPropValue<T>	—	(model) => boolean — reactive disabled
$readonly	DisabledPropValue<T>	—	(model) => boolean — reactive readonly

HxInputInner (inner <input>)

Prop	Type	Default	Description
type	'text' | 'password'	'text'	Input type. password toggles visibility via suffix icon
selectAll	boolean	true	Select all text on focus
emitChangeOnBlur	boolean	false	When true, model is only updated on blur
emitChangeDelay	number	150	Debounce delay (ms). Negative values are clamped to 0
toModel	(display, context) => model	—	Converts the display text to a model value before commit; lacked = pass through as-is
fromModel	(model, context) => display	asStr	Converts the model value to the display text; inject to format non-string models

Native DOM Events

Commonly used: onFocus, onBlur (for focus-based UI effects). onKeyDown (for Enter-to-submit or custom shortcuts).

Available but usually unnecessary: onChange, onInput — value changes are handled automatically via $model/$field reactive binding. Adding an explicit onChange handler is redundant in most cases.

Available if needed: onBeforeInput, onKeyUp, onKeyPress, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onCompositionStart, onCompositionEnd, onCompositionUpdate (IME events handled internally), onTouchStart, onTouchEnd, onPointerDown, onPointerUp.

Excluded native attributes: disabled (use $disabled), type (use component type prop), value, placeholder (use component placeholder prop), readOnly (use $readonly), height, width, checked, children, minLength, maxLength, required, multiple, pattern, size, color.

All other standard <input> attributes (including autoComplete, autoFocus, spellCheck) are forwarded.

Global Config

import { configHxInput } from '@hx/components';
configHxInput({ selectAll: true, emitChangeDelay: 150 });