Skip to main content

Skeletons.EntryBox

An enhanced input field that extends Entry with built-in validation display, prefix icons, password toggle, and custom validators. Use it when the input needs visual feedback or richer validation than a plain Entry.


Signature

Skeletons.EntryBox(props, style?)

Common Props

Inherits all props from Skeletons.Entry plus:

PropTypeDescription
validatorsArrayCustom validation functions to run on input
showErrorBooleanWhether to show inline error messages — defaults to true
prefixAnyIcon or element rendered before the input (e.g. an email icon)
showerNumber1 to add a show/hide toggle for password fields
classNameStringCSS class(es) to apply
placeholderStringPlaceholder text
valueStringInitial value
sys_pnStringNamed part
formItemStringModel key this input is bound to
requireStringValidation type — e.g. "email"
modeString"commit" to trigger service on Enter
serviceStringService triggered on submit
uiHandlerWidgetRoutes interaction events to onUiEvent
errorHandlerWidgetRoutes validation error events
interactiveNumber1 to enable interactive mode
preselectNumber1 to select all text on focus

Examples

Email input with icon, validators, and error display

Skeletons.EntryBox({
className: `${fig}__entry email`,
sys_pn: "ref-email",
formItem: "email",
placeholder: LOCALE.EMAIL,
require: "email",
mode: "commit",
service: "my-submit",
interactive: 1,
preselect: 1,
uiHandler: ui,
errorHandler: ui,
validators: myEmailValidators,
showError: false,
prefix: emailIcon,
});

Password input with show/hide toggle

Skeletons.EntryBox({
className: `${fig}__password`,
sys_pn: "ref-password",
placeholder: LOCALE.PASSWORD,
mode: "commit",
service: "my-submit",
shower: 1,
uiHandler: ui,
});

Entry vs EntryBox

FeatureEntryEntryBox
Basic input
Validation (require)
Custom validators
Inline error display
Prefix icon
Password show/hide

Use Entry for simple inputs. Use EntryBox when you need validation feedback, a prefix icon, or a password toggle.