Supported form types

Moyuk automatically generates forms from your TypeScript interfaces. Here is a list of supported form field types and corresponding TypeScript types.

text

Provides a freeform text input.

TypeScript Type	Generated Form Field
name: string;

The following types are interpreted as text fields by default:

• string
• string | undefined - Empty string is converted to undefined.
• string | null - Empty string is converted to null.
• "s" (string literal) - Becomes a readonly text field with the given value.

The following types also can be used as text fields with form customizations:

• string[] - Becomes a multi-line text field.

number

Provides a numeric input.

TypeScript Type	Generated Form Field
value: number;

The following types generate number fields:

• number - Does not allow empty input.
• number | undefined - Empty string is converted to undefined.
• number | null - Empty string is converted to null.
• 1 (number literal) - Becomes a readonly text field with the given value.

caution

Moyuk does not support bigint type yet.

checkbox

Provides a checkbox.

TypeScript Type	Generated Form Field
upperCase: boolean;

The following types generate checkbox fields:

• boolean
• boolean | undefined - Unchecked state is interpreted as undefined.
• boolean | null - Unchecked state is interpreted as null.

select

Provides a select input.

TypeScript Type	Generated Form Field
theme: "light" | "dark"

The following types generate select fields:

• "red" | "green" | "blue" (union of string literals) - Becomes a select with the given options.
• "red" | "green" | undefined (union of string literals or undefined) - Becomes a select with the given options and an empty option.
• 1 | 2 | 3 (union of number literals) - Becomes a select with the given options.
• 1 | 2 | undefined (union of number literals or undefined) - Becomes a select with the given options and an empty option.

date

Provides a date input. The default date format is automatically determined by the user's locale.

TypeScript Type	Generated Form Field
date: Date;

The following types generate date fields:

• Date - Does not allow empty input.
• Date | undefined - Empty string is converted to undefined.
• Date | null - Empty string is converted to null.

The following types also can be used as date fields with form customizations:

• string
• string | undefined - Empty string is converted to undefined.
• string | null - Empty string is converted to null.

datetime

Provides a date and time input. The default datetime format is automatically determined by the user's locale.

TypeScript Type	Generated Form Field
datetime: Date;

The following types can be used as datetime fields with form customizations:

• Date - Does not allow empty input.
• Date | undefined - Empty string is converted to undefined.
• Date | null - Empty string is converted to null.
• string
• string | undefined - Empty string is converted to undefined.
• string | null - Empty string is converted to null.

time

Provides a time input. The default time format is automatically determined by the user's locale.

TypeScript Type	Generated Form Field
time: string;

The following types can be used as time fields with form customizations:

• Date - Does not allow empty input.
• Date | undefined - Empty string is converted to undefined.
• Date | null - Empty string is converted to null.
• string
• string | undefined - Empty string is converted to undefined.
• string | null - Empty string is converted to null.

tags

Provides a tags input.

TypeScript Type	Generated Form Field
tags: Set<string>

The following types generate tags fields:

• Set<string>
• Set<string> | undefined - undefined if no tags are entered.
• Set<string> | null - null if no tags are entered.
• Set<number>
• Set<"red" | "green" | "blue"> (Set of string literals) - Becomes a tags input with the given options.

record-table

Provides a spreadsheet-like data table with infinite number of rows and fixed number of columns.

TypeScript Type	Generated Form Field
values: { name: string, age: number }[]

The following types generate record-table fields by default:

• { name: string, age: number }[] (array of object literals) - Becomes a table with columns for each property.
• [string, number][] (array of tuples) - Becomes a table with columns for each tuple element.
• string[] (Array) - Becomes a table with a single column.
• Set<string> (Set) - Becomes a table with a single column.
• Map<string, number> (Map) - Becomes a table with 2 columns: key and value.

You can also use tuples instead of arrays to specify the number of rows.

flex-table

Provides a spreadsheet-like data table with infinite number of rows and columns.

TypeScript Type	Generated Form Field
values: string[][]

Any array of arrays with following types generate flex-table fields:

• string (or string literal)
• number (or number literal)
• boolean (or boolean literal)
• undefined
• null
• Date
• RegExp

You can also use tuples instead of arrays to specify the number of columns and rows.

file

Provides a file input / output.

TypeScript Type	Generated Form Field
files: File[]

The following types generate file fields:

• File - Does not allow empty input.
• Blob - Does not allow empty input.
• File | undefined - undefined if no file is selected.
• File[] - Multiple files can be selected.
• [File, File?, File?] - 1 to 3 files can be selected.
• [File, ...File[]] - At least 1 file must be selected.