Documentation / @zerotal/admin / index / Field

Class: Field

Defined in: admin/src/form/Field.ts:115

Constructors

Constructor

new Field(key, type?): Field

Defined in: admin/src/form/Field.ts:169

Parameters

key

string

type?

FieldType = "text"

Returns

Field

Methods

make()

static make(key): Field

Defined in: admin/src/form/Field.ts:174

Parameters

key

string

Returns

Field

label()

label(label): this

Defined in: admin/src/form/Field.ts:180

Parameters

label

string

Returns

this

placeholder()

placeholder(text): this

Defined in: admin/src/form/Field.ts:185

Parameters

text

string

Returns

this

helperText()

helperText(text): this

Defined in: admin/src/form/Field.ts:191

Hint text shown beneath the input.

Parameters

text

string

Returns

this

default()

default(value): this

Defined in: admin/src/form/Field.ts:196

Parameters

value

unknown

Returns

this

disabled()

disabled(value?): this

Defined in: admin/src/form/Field.ts:201

Parameters

value?

boolean = true

Returns

this

columnSpan()

columnSpan(span): this

Defined in: admin/src/form/Field.ts:206

Parameters

span

number

Returns

this

autocomplete()

autocomplete(value): this

Defined in: admin/src/form/Field.ts:211

Parameters

value

string

Returns

this

email()

email(): this

Defined in: admin/src/form/Field.ts:218

Returns

this

password()

password(): this

Defined in: admin/src/form/Field.ts:223

Returns

this

numeric()

numeric(): this

Defined in: admin/src/form/Field.ts:228

Returns

this

url()

url(): this

Defined in: admin/src/form/Field.ts:233

Returns

this

tel()

tel(): this

Defined in: admin/src/form/Field.ts:238

Returns

this

toggle()

toggle(): this

Defined in: admin/src/form/Field.ts:244

Render as an on/off toggle switch (boolean).

Returns

this

radio()

radio(): this

Defined in: admin/src/form/Field.ts:250

Render as a radio group (single choice from options).

Returns

this

checkboxList()

checkboxList(): this

Defined in: admin/src/form/Field.ts:256

Render as a list of checkboxes (multi-select → array of values).

Returns

this

date()

date(): this

Defined in: admin/src/form/Field.ts:263

Native date picker (<input type="date">).

Returns

this

dateTime()

dateTime(): this

Defined in: admin/src/form/Field.ts:269

Native date-time picker (<input type="datetime-local">).

Returns

this

time()

time(): this

Defined in: admin/src/form/Field.ts:275

Native time picker (<input type="time">).

Returns

this

color()

color(): this

Defined in: admin/src/form/Field.ts:281

Native color picker (<input type="color">).

Returns

this

hidden()

hidden(): this

Defined in: admin/src/form/Field.ts:287

Hidden field — kept in form state, not shown.

Returns

this

tags()

tags(): this

Defined in: admin/src/form/Field.ts:293

Token/tags input → array of strings.

Returns

this

keyValue()

keyValue(): this

Defined in: admin/src/form/Field.ts:299

Key/value editor → an object.

Returns

this

file()

file(): this

Defined in: admin/src/form/Field.ts:305

File upload — stores the file on save and persists the path.

Returns

this

disk()

disk(dir): this

Defined in: admin/src/form/Field.ts:311

Storage directory/disk for a file upload (passed to TemporaryUploadedFile.store).

Parameters

dir

string

Returns

this

accept()

accept(mime): this

Defined in: admin/src/form/Field.ts:317

Restrict accepted file types (the input's accept attribute).

Parameters

mime

string

Returns

this

image()

image(): this

Defined in: admin/src/form/Field.ts:323

Shorthand for an image upload (accept="image/*").

Returns

this

multiple()

multiple(value?): this

Defined in: admin/src/form/Field.ts:330

Allow selecting multiple values (select → array; rendered as a checkbox list).

Parameters

value?

boolean = true

Returns

this

searchable()

searchable(value?): this

Defined in: admin/src/form/Field.ts:336

Make a select searchable (renders a filterable <datalist> combobox).

Parameters

value?

boolean = true

Returns

this

createOption()

createOption(value?): this

Defined in: admin/src/form/Field.ts:342

Allow choosing a value not in options (free entry; skips the one-of rule).

Parameters

value?

boolean = true

Returns

this

live()

live(value?): this

Defined in: admin/src/form/Field.ts:349

Re-evaluate dependent fields on every change to this field.

Parameters

value?

boolean = true

Returns

this

afterStateUpdated()

afterStateUpdated(fn): this

Defined in: admin/src/form/Field.ts:361

Reactive hook, run on the server when this field changes; return an object to merge into the form (e.g. derive a slug):

textInput("title").live() .afterStateUpdated((v) => ({ slug: String(v).toLowerCase().replace(/\s+/g, "-") }))

Parameters

fn

(value, data) => void | Record<string, unknown>

Returns

this

step()

step(n): this

Defined in: admin/src/form/Field.ts:370

Numeric step for number/range inputs.

Parameters

n

number

Returns

this

schema()

schema(fields): this

Defined in: admin/src/form/Field.ts:378

The sub-schema repeated for each row of a repeater.

Parameters

fields

Field[]

Returns

this

blocks()

blocks(blocks): this

Defined in: admin/src/form/Field.ts:384

The block types available in a builder.

Parameters

blocks

BuilderBlock[]

Returns

this

addActionLabel()

addActionLabel(label): this

Defined in: admin/src/form/Field.ts:390

Custom label for the repeater/builder "add" button.

Parameters

label

string

Returns

this

minItems()

minItems(n): this

Defined in: admin/src/form/Field.ts:396

Minimum number of repeater/builder rows.

Parameters

n

number

Returns

this

maxItems()

maxItems(n): this

Defined in: admin/src/form/Field.ts:402

Maximum number of repeater/builder rows.

Parameters

n

number

Returns

this

reorderable()

reorderable(value?): this

Defined in: admin/src/form/Field.ts:408

Allow (or forbid) reordering repeater/builder rows.

Parameters

value?

boolean = true

Returns

this

itemLabel()

itemLabel(fn): this

Defined in: admin/src/form/Field.ts:414

Title each repeater/builder row from its data (shown in the row header).

Parameters

fn

(data, index) => string

Returns

this

rows()

rows(n): this

Defined in: admin/src/form/Field.ts:420

Rows for a textarea.

Parameters

n

number

Returns

this

render()

render(fn): this

Defined in: admin/src/form/Field.ts:432

Render this field's control yourself. See customField.

The renderer receives the current value and the whole form's data, so a control can react to its siblings — a district picker that depends on the country chosen above it.

Parameters

fn

(value, data) => string | HtmlNode

Returns

this

options()

options(options): this

Defined in: admin/src/form/Field.ts:438

Options for a select — { value: label } map or an array of {value,label}.

Parameters

options

Record<string, string> | SelectOption[]

Returns

this

optionsUsing()

optionsUsing(loader): this

Defined in: admin/src/form/Field.ts:452

Load select options dynamically (e.g. a BelongsTo relationship). The loader runs each render; return { value, label }[].

select("userId").label("Author") .optionsUsing(async () => (await User.all()).map((u) => ({ value: String(u.id), label: u.name })))

Parameters

loader

() => SelectOption[] | Promise<SelectOption[]>

Returns

this

required()

required(value?): this

Defined in: admin/src/form/Field.ts:460

Parameters

value?

boolean = true

Returns

this

minLength()

minLength(n): this

Defined in: admin/src/form/Field.ts:466

Min length (string) / min value (number).

Parameters

n

number

Returns

this

maxLength()

maxLength(n): this

Defined in: admin/src/form/Field.ts:471

Parameters

n

number

Returns

this

min()

min(n): this

Defined in: admin/src/form/Field.ts:476

Parameters

n

number

Returns

this

max()

max(n): this

Defined in: admin/src/form/Field.ts:481

Parameters

n

number

Returns

this

confirmed()

confirmed(value?): this

Defined in: admin/src/form/Field.ts:487

Require a matching {key}_confirmation field (e.g. password).

Parameters

value?

boolean = true

Returns

this

rule()

rule(fn): this

Defined in: admin/src/form/Field.ts:493

Append a custom validator rule.

Parameters

fn

(rule) => AnyRule

Returns

this

mutate()

mutate(fn): this

Defined in: admin/src/form/Field.ts:503

Transform the value just before it is saved — the counterpart to Field.hydrate. May be async, e.g. hashing a password: .mutate((v) => Hash.make(v)).

Parameters

fn

(value) => unknown

Returns

this

dehydrate()

dehydrate(value): Promise<unknown>

Defined in: admin/src/form/Field.ts:549

Apply this field's save-time transform: serialize key/value text → object, persist any pending file upload(s) → stored path, then run a custom mutator.