WEBRAD / TECHNICAL REFERENCE

Edit

Single-line input with a type, value, and editing events.

WebEditStandardVisual7 events

Quick start

Add Edit1 in the Designer. Use the example in a page method.

Edit1.inputType = 'email';
Edit1.placeholder = 'you@example.com';
Edit1.readOnly = false;
Edit1.value = 'ana@example.com';
Edit1.onInput = (sender) => {
  Message(sender.value.trim());
};
Edit1.focus({ preventScroll: true });
// Edit1.clear();

inputType accepts text, password, email, number, search, tel, and url.
OnInput tracks typing; OnChange tracks confirmation by the browser.
Use readOnly to prevent editing, clear() to clear, and focus() to focus.

Input masks

Select the Edit and open Input mask in the Inspector. Turn on Enable mask and enter a pattern in Mask.
Use 0 for a digit, a for a Unicode letter, * for a letter or number, and # for any character. Other characters are literals. Escape a token or grammar character with a backslash to make it literal.
Use [optional] groups, {count} or {min,max} repetitions, and | alternatives. For example, (00) 0000[0]-0000 accepts a phone number with an optional extra digit.
Set Letter case to none, upper, or lower. Custom tokens accepts a JSON object of single-character rules, for example {"H":{"pattern":"[0-9A-Fa-f]","transform":"upper"}}. Custom rules can override built-in tokens.

value contains the formatted text, while rawValue contains accepted characters without mask literals. Assign rawValue when the input has no literals. maskComplete indicates whether required positions are filled; maskError reports an invalid pattern. Incomplete values remain editable, so check maskComplete before submitting. Invalid patterns disable masking until corrected. With a mask enabled, number, email, and url inputs use a text element to allow literals and editing.

Runtime changes affect the current instance; use the Inspector to save the configuration in the project.

More examples

All input types

import type { WebInputType } from '@webrad/runtime';
const inputTypes: readonly WebInputType[] = [
  'text', 'password', 'email', 'number', 'search', 'tel', 'url',
];
Edit1.inputType = inputTypes[0] ?? 'text';
// Even with inputType number, value remains a string.
const numberValue = Number(Edit1.value);
if (!Number.isFinite(numberValue)) Message('Enter a valid number');

Phone mask and raw value

Edit1.mask = '(00) 0000[0]-0000';
Edit1.maskEnabled = true;
Edit1.rawValue = '11987654321';
console.log(Edit1.value, Edit1.rawValue); // (11) 98765-4321, 11987654321
if (!Edit1.maskComplete) Message('Complete the phone number');

Custom hexadecimal token

Edit1.maskTokens = { H: { pattern: '[0-9A-Fa-f]', transform: 'upper' } };
Edit1.mask = 'HH-HH';
Edit1.maskEnabled = true;
Edit1.rawValue = 'a1b2';
console.log(Edit1.value); // A1-B2

Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

Property / source	Type and options	Default	Runtime access
`name`Name · Identity	`string`	`—`	name
`x`Left · Size & position	`number`	`0`	x
`y`Top · Size & position	`number`	`0`	y
`width`Width · Size & position	`number`	`160`	width
`height`Height · Size & position	`number`	`36`	height
`itemWidth`Responsive width · Responsive sizeFit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits.	`enumfixed` `stretch` `fit-content`	`"fixed"`	Inspector / configuration
`itemHeight`Responsive height · Responsive sizeFit content grows the item to its lowest rendered child and preserves child intrinsic heights; minimum and maximum height remain limits.	`enumfixed` `stretch` `fit-content`	`"fixed"`	Inspector / configuration
`itemMinWidth`Minimum width · Responsive size	`number`	`0`	Inspector / configuration
`itemMaxWidth`Maximum width · Responsive size	`number`	`null`	Inspector / configuration
`itemMinHeight`Minimum height · Responsive size	`number`	`0`	Inspector / configuration
`itemMaxHeight`Maximum height · Responsive size	`number`	`null`	Inspector / configuration
`itemGrow`Grow · Responsive size	`number`	`0`	Inspector / configuration
`itemShrink`Shrink · Responsive sizeAllows fixed and stretch flow items to yield space. Fit-content keeps its intrinsic size so its children are not compressed.	`boolean`	`true`	Inspector / configuration
`itemAlignSelf`Item alignment · Responsive sizeCross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior.	`enumauto` `start` `center` `end` `stretch`	`"auto"`	Inspector / configuration
`itemHorizontalAnchor`Horizontal anchor · Anchors & offsets	`enumstart` `center` `end` `stretch`	`"start"`	Inspector / configuration
`itemVerticalAnchor`Vertical anchor · Anchors & offsets	`enumstart` `center` `end` `stretch`	`"start"`	Inspector / configuration
`itemLeft`Left inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`itemRight`Right inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`itemTop`Top inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`itemBottom`Bottom inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`margin`Margin · SpacingOuter spacing on all four sides, in pixels. Row and column layouts include this spacing between components.	`number`	`0`	margin
`marginTop`Margin top · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginTop
`marginRight`Margin right · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginRight
`marginBottom`Margin bottom · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginBottom
`marginLeft`Margin left · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginLeft
`visible`Visible · Behavior	`boolean`	`true`	visible
`collapseWhenHidden`Collapse when hidden · BehaviorRemoves the component from the layout while it is not visible.	`boolean`	`true`	collapseWhenHidden
`enabled`Enabled · Behavior	`boolean`	`true`	enabled
`tabIndex`TabIndex · Behavior	`number`	`0`	tabIndex
`label`Label · AppearanceOptional accessible label for this field.	`string`	`""`	label
`icon`Icon · AppearanceOptional icon displayed inside the field.	`icon` 214 options `add` `chevron-down` `chevron-right` `close` `delete` `folder-open` `info` `layers` `lightbulb` `palette` `page` `play` `redo` `save` `search` `settings` `style` `undo` `arrow-left` `arrow-right` `arrow-up` `arrow-down` `chevron-left` `chevron-up` `chevrons-left` `chevrons-right` `chevrons-up` `chevrons-down` `menu` `more-horizontal` `more-vertical` `home` `external-link` `check` `check-circle` `check-square` `minus` `minus-circle` `plus-circle` `edit` `copy` `cut` `clipboard` `download` `upload` `refresh` `link` `unlink` `share` `send` `printer` `archive` `eye` `eye-off` `lock` `unlock` `filter` `sort-asc` `sort-desc` `warning` `alert-circle` `help-circle` `bell` `bookmark` `flag` `heart` `star` `folder` `file` `file-plus` `file-text` `text` `image` `camera` `database` `table` `list` `grid` `chart-bar` `chart-line` `code` `terminal` `cloud` `upload-cloud` `download-cloud` `user` `users` `user-plus` `mail` `phone` `globe` `map-pin` `calendar` `clock` `pause` `stop` `skip-back` `skip-forward` `volume-2` `volume-x` `video` `login` `logout` `sign-in` `sign-out` `door-in` `door-out` `door-open` `door-closed` `key` `key-round` `shield` `shield-check` `shield-alert` `shield-x` `fingerprint` `badge-check` `id-card` `user-check` `user-x` `user-minus` `user-round` `contact` `accessibility` `password` `at-sign` `scan-face` `circle` `circle-dot` `square` `move` `maximize` `minimize` `expand` `shrink` `fullscreen` `panel-left` `panel-right` `panel-top` `panel-bottom` `sidebar-left` `sidebar-right` `layout` `columns` `rows` `align-left` `align-center` `align-right` `align-justify` `rotate-cw` `rotate-ccw` `repeat` `folder-plus` `folder-minus` `folder-x` `folder-search` `folder-check` `folder-lock` `file-minus` `file-x` `file-check` `file-code` `file-image` `file-video` `file-audio` `file-archive` `file-lock` `file-search` `file-copy` `files` `hard-drive` `server` `cpu` `monitor` `laptop` `smartphone` `tablet` `wifi` `bluetooth` `message-circle` `message-square` `messages-square` `message-plus` `message-x` `inbox` `outbox` `reply` `reply-all` `forward-mail` `paperclip` `attachment` `rss` `megaphone` `microphone` `microphone-off` `headset` `radio` `sms` `cart` `shopping-bag` `credit-card` `receipt` `wallet` `dollar-sign` `percent` `tags` `gift` `truck` `building` `briefcase` `target` `trophy` `toggle-right`	`""`	icon
`iconAccessibleLabel`Icon accessible label · AccessibilityAccessible name for the icon action. Empty uses the icon and field names.	`string`	`""`	iconAccessibleLabel
`value`Value · Data	`string`	`""`	value
`placeholder`Placeholder · Appearance	`string`	`""`	placeholder
`readOnly`Read Only · Behavior	`boolean`	`false`	readOnly
`inputType`Input Type · Behavior	`enumtext` `password` `email` `number` `search` `tel` `url`	`"text"`	inputType
`maskEnabled`Enable mask · Input maskApply the pattern to typing, paste and values assigned by code.	`boolean`	`false`	maskEnabled
`mask`Mask pattern · Input mask0: digit; a: letter; *: alphanumeric; #: any character. Use [optional], {min,max}, \| alternatives and backslash escapes. Example: (00) 0000[0]-0000.	`string`	`""`	maskConditional availability in the Inspector
`maskCase`Letter case · Input mask	`enumnone` `upper` `lower`	`"none"`	maskCaseConditional availability in the Inspector
`maskTokens`Custom tokens · Input maskJSON character rules, merged with the built-ins. Example: {"H":{"pattern":"[0-9A-Fa-f]","transform":"upper"}}. Each key is one character; patterns match one complete character.	`json`	`{}`	maskTokensConditional availability in the Inspector
`currentRowBindings`Current row · DataBind writable visual values to fields of this repeated row.	`current-row-bindings`Editor: current-row-bindings	`[]`	currentRowBindings

API in code

Member	Signature	Access
`value`	`get value(): string;`	Read and write
`rawValue`Accepted characters without mask literals. Assign this when input is known to be raw.	`get rawValue(): string;`	Read and write
`maskEnabled`	`get maskEnabled(): boolean;`	Read and write
`mask`0 digit, a Unicode letter, * alphanumeric, # any character; escape literals with \\.	`get mask(): string;`	Read and write
`maskTokens`Custom tokens override built-ins. Each pattern matches one whole Unicode character.	`get maskTokens(): WebEditMaskTokens;`	Read and write
`maskCase`	`get maskCase(): WebEditMaskCase;`	Read and write
`maskComplete`True when an active mask has all its required positions filled. Empty is incomplete.	`get maskComplete(): boolean;`	Read-only
`maskError`Empty for a valid pattern. Invalid patterns leave the text editable without masking.	`get maskError(): string;`	Read-only
`placeholder`	`get placeholder(): string;`	Read and write
`readOnly`	`get readOnly(): boolean;`	Read and write
`inputType`	`get inputType(): WebInputType;`	Read and write
`label`Visible, accessible field label. An empty string hides it.	`get label(): string;`	Read and write
`icon`Icon shown inside the field. An empty string removes it.	`get icon(): WebEditIcon;`	Read and write
`iconAccessibleLabel`Accessible name of the clickable icon; empty uses the icon and field names.	`get iconAccessibleLabel(): string;`	Read and write
`enabled`	`get enabled(): boolean;`	Read and write
`tabIndex`	`get tabIndex(): number;`	Read and write
`onChange`	`set onChange(handler: WebComponentEventHandler<this> \| null);`	Read and write
`onInput`	`set onInput(handler: WebComponentEventHandler<this> \| null);`	Read and write
`onIconClick`Binds the icon action, enabling its native button and hover feedback.	`set onIconClick(handler: ((sender: this, event: MouseEvent) => void \| Promise<void>) \| null);`	Read and write

`focus`

method

focus(options?: FocusOptions): void;

Example

Edit1.focus({ preventScroll: true });

`clear`

method

clear(): void;

Example

Edit1.clear();

`bindEvent`

method

bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;

Example

Edit1.bindEvent('OnClick', (sender, event) => { console.log(sender.name, event.type); });

`dispose`

method

dispose(): void;

Example

// Call only when disposing of an instance whose lifecycle you control.
Edit1.dispose();

Inherited members (22)

Member	Signature	Access
`currentRowBindings`	`currentRowBindings: readonly WebCurrentRowBinding[];`	Read and write
`element`	`readonly element: TElement;`	Read-only
`id`	`readonly id: string;`	Read-only
`name`	`readonly name: string;`	Read-only
`visible`	`visible: boolean;`	Read and write
`collapseWhenHidden`	`collapseWhenHidden: boolean;`	Read and write
`x`	`x: number;`	Read and write
`y`	`y: number;`	Read and write
`width`	`width: number;`	Read and write
`height`	`height: number;`	Read and write
`margin`Outer spacing on all four sides, in pixels.	`margin: number;`	Read and write
`marginTop`	`marginTop: number;`	Read and write
`marginRight`	`marginRight: number;`	Read and write
`marginBottom`	`marginBottom: number;`	Read and write
`marginLeft`	`marginLeft: number;`	Read and write
`alignSelf`	`alignSelf: RuntimeLayoutAlignSelf;`	Read and write
`backgroundColor`	`backgroundColor: string;`	Read and write
`color`	`color: string;`	Read and write
`borderColor`	`borderColor: string;`	Read and write

`show`

method

show(): void;

`hide`

method

hide(): void;

`emit`

method

emit(eventName: string, detail?: unknown): boolean;

Events

Link methods in Interaction. How to use events.

OnChange

Standard event (Event).

Signature and example

import type { WebEdit } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Edit1Change(
    sender: WebEdit,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnInput

Standard event (Event).

Signature and example

import type { WebEdit } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Edit1Input(
    sender: WebEdit,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnFocus

Standard event (Event).

Signature and example

import type { WebEdit } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Edit1Focus(
    sender: WebEdit,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnBlur

Standard event (Event).

Signature and example

import type { WebEdit } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Edit1Blur(
    sender: WebEdit,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnIconClick

Standard event (Event).

Signature and example

import type { WebEdit } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Edit1IconClick(
    sender: WebEdit,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnKeyDown

Standard event (Event).

Signature and example

import type { WebEdit } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Edit1KeyDown(
    sender: WebEdit,
    event: Event,
  ): Promise<void> {
    if (event instanceof KeyboardEvent) console.log(event.key);
  }
}

OnKeyUp

Standard event (Event).

Signature and example

import type { WebEdit } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Edit1KeyUp(
    sender: WebEdit,
    event: Event,
  ): Promise<void> {
    if (event instanceof KeyboardEvent) console.log(event.key);
  }
}