text

A single-line <input>. This is the default kind: leave kind out and you get one.

{
  fields: [
    { name: 'title', displayName: 'Title' },
    { name: 'subtitle', displayName: 'Subtitle', placeholder: 'Optional' },
  ],
}

Rendered form

Values

—

Options

Option	Type	Notes
type	string	Maps to the type attribute: 'password', 'number', 'email', 'url', …
placeholder	Reactive<string>	Literal, or a function of the form context
autocomplete	string	Maps to the autocomplete attribute

Plus everything in the shared options.

Input types

{ name: 'token', displayName: 'Access token', type: 'password' }
{ name: 'count', displayName: 'Copies', type: 'number' }

The value is always read back as a string, even for type: 'number'. Convert it where you use it:

onConfirm: (values) => save({ copies: Number(values['count']) }),

Reactive placeholders

If the placeholder is a function, it is calculated again on every form update, so it can follow another field:

{
  name: 'locator',
  displayName: 'Locator',
  placeholder: ({ data }) =>
    data['locatorType'] === 'chapter' ? 'e.g. 4' : 'e.g. 12–18',
}

Autocomplete

The <form> element is created with autocomplete="off", so the browser does not fill fields in automatically. Turn it back on for the single fields where you really want it, such as a real name or address field:

{ name: 'email', displayName: 'Email', autocomplete: 'email' }

Values

getValue() returns the current text of the input, and the empty value is ''. If you set something that is not a string, it is converted in a sensible way: 0 becomes '0', null and undefined become '', and objects are converted to JSON.

form.field('title')?.setValue('Field notes');
form.getValues()['title']; // 'Field notes'