Editors

Editors are the input widgets used in Serenity forms. They are created by the PropertyGrid based on the editor type specified in the form metadata (via editor attributes on the server side), and they implement standard value interfaces so the form can read and write their values.

The EditorWidget Base

Most editors derive from EditorWidget, which extends Widget and adds editor-specific props and read-only handling:

type EditorProps<T> = WidgetProps<T> & {
    initialValue?: any;
    maxLength?: number;
    name?: string;
    placeholder?: string;
    required?: boolean;
    readOnly?: boolean;
}

EditorWidget provides a readOnly property that sets/gets the read-only state of the editor's element.

Value Interfaces

Editors implement value interfaces that let the form (and other code) interact with them generically:

Interface	Purpose
`IStringValue`	`get_value()` / `set_value()` for string editors.
`IDoubleValue`	`get_value()` / `set_value()` for numeric editors.
`IBooleanValue`	`get_value()` / `set_value()` for boolean editors.
`IGetEditValue`	`getEditValue(property, target)` — writes the editor value into a target object.
`ISetEditValue`	`setEditValue(source, property)` — populates the editor from a source object.
`IReadOnly`	Marks a widget as supporting read-only state.
`IValidateRequired`	Marks an editor that participates in required validation.

The PropertyGrid uses these interfaces to load entity values into editors and to collect edited values back into the entity.

Editors by Task

Text Editors

Editor	Description
StringEditor	Single-line text input.
TextAreaEditor	Multi-line text area.
EmailEditor	Email input with validation.
EmailAddressEditor	Email address input.
PasswordEditor	Password input.
URLEditor	URL input.
MaskedEditor	Masked input.

Numeric Editors

Editor	Description
IntegerEditor	Integer input.
DecimalEditor	Decimal input.
AutoNumeric	Numeric input with formatting.

Date and Time Editors

Editor	Description
DateEditor	Date picker.
DateTimeEditor	Date-time picker.
DateYearEditor	Year picker.
TimeEditor	Time picker.

Selection Editors

Editor	Description
SelectEditor	Dropdown from a static list.
EnumEditor	Dropdown from an enum.
ComboboxEditor	Combobox with search.
RadioButtonEditor	Radio button group.
BooleanEditor	Checkbox.
CheckTreeEditor	Checkbox tree.

Lookup Editors

Editor	Description
LookupEditor	Dropdown from a lookup script.
ServiceLookupEditor	Dropdown from a service lookup.
CheckLookupEditor	Checkbox list from a lookup.

See Lookup Editors for details.

File Editors

Editor	Description
FileUploadEditor	Single file upload.
MultipleFileUploadEditor	Multiple file upload.
ImageUploadEditor	Single image upload.
MultipleImageUploadEditor	Multiple image upload.

Rich Text Editors

Editor	Description
HtmlContentEditor	Rich HTML editor.
HtmlNoteContentEditor	Rich HTML editor for notes.
HtmlReportContentEditor	Rich HTML editor for reports.

Other Editors

Editor	Description
Recaptcha	reCAPTCHA widget.
CascadedWidgetLink	Links a parent editor to a child editor (cascading).

How Editors Are Selected

On the server side, a form property specifies its editor via an editor attribute:

[LookupEditor(typeof(CustomerRow))]
public string CustomerID { get; set; }

The attribute sets the editor type key (e.g. "Lookup") and editor options. The generated PropertyItem carries this to the client, where the PropertyGrid looks up the editor type in the EditorTypeRegistry and creates it with the given options.

Custom Editors

To create a custom editor, extend Widget (or EditorWidget), implement the value interfaces you need, and register it with registerEditor:

export class MyEditor extends Widget<MyEditorOptions> {
    static override [Symbol.typeInfo] = this.registerEditor("MyApp.MyEditor", [IGetEditValue, ISetEditValue]);
    // ...
}

See Custom Editors for details.