# Edit

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

URL: https://webrad.atentor.com/docs/edit
Updated: 2026-11-07

WebEdit · Standard · Visual · 7 events

## Quick start

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

```ts
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();
```

Content is stored in value, including with inputType number. To access event.key, narrow event with instanceof KeyboardEvent.

- 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

1. Select the Edit and open **Input mask** in the Inspector. Turn on **Enable mask** and enter a pattern in **Mask**.
2. 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.
3. 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.
4. 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

```ts
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

```ts
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

```ts
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 size — Fit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits. | `enum` — `fixed` `stretch` `fit-content` | `"fixed"` | Inspector / configuration |
| `itemHeight` — Responsive height · Responsive size — Fit content grows the item to its lowest rendered child and preserves child intrinsic heights; minimum and maximum height remain limits. | `enum` — `fixed` `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 size — Allows 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 size — Cross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior. | `enum` — `auto` `start` `center` `end` `stretch` | `"auto"` | Inspector / configuration |
| `itemHorizontalAnchor` — Horizontal anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemVerticalAnchor` — Vertical anchor · Anchors & offsets | `enum` — `start` `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 · Spacing — Outer spacing on all four sides, in pixels. Row and column layouts include this spacing between components. | `number` | `0` | margin |
| `marginTop` — Margin top · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginTop |
| `marginRight` — Margin right · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginRight |
| `marginBottom` — Margin bottom · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginBottom |
| `marginLeft` — Margin left · Spacing — Outer 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 · Behavior — Removes 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 · Appearance — Optional accessible label for this field. | `string` | `""` | label |
| `icon` — Icon · Appearance — Optional 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 · Accessibility — Accessible 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 | `enum` — `text` `password` `email` `number` `search` `tel` `url` | `"text"` | inputType |
| `maskEnabled` — Enable mask · Input mask — Apply the pattern to typing, paste and values assigned by code. | `boolean` | `false` | maskEnabled |
| `mask` — Mask pattern · Input mask — 0: digit; a: letter; *: alphanumeric; #: any character. Use [optional], {min,max}, \| alternatives and backslash escapes. Example: (00) 0000[0]-0000. | `string` | `""` | mask — Conditional availability in the Inspector |
| `maskCase` — Letter case · Input mask | `enum` — `none` `upper` `lower` | `"none"` | maskCase — Conditional availability in the Inspector |
| `maskTokens` — Custom tokens · Input mask — JSON 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` | `{}` | maskTokens — Conditional availability in the Inspector |
| `currentRowBindings` — Current row · Data — Bind 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

```ts
focus(options?: FocusOptions): void;
```

Example

```ts
Edit1.focus({ preventScroll: true });
```

### `clear`

method

```ts
clear(): void;
```

Example

```ts
Edit1.clear();
```

### `bindEvent`

method

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

Example

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

### `dispose`

method

```ts
dispose(): void;
```

Example

```ts
// 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

```ts
show(): void;
```

### `hide`

method

```ts
hide(): void;
```

### `emit`

method

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

## Events

Link methods in **Interaction**. [How to use events](https://webrad.atentor.com/docs/interactions).

### OnChange

Standard event (Event).

Signature and example

```ts
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

```ts
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

```ts
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

```ts
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

```ts
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

```ts
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

```ts
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);
  }
}
```