Form inputs and layout used to get args from the user.
children: FiolinFormComponent[]
The children (either layout or content) of the form
autofocusedName?: string
The autofocused component (identified by name) if any
autofocusedValue?: string
The autofocused component (identified by value) if any; only used to distinguish between multiple components with the same name (e.g., RADIOs or BUTTONs)
Component/entity type pairs. Mostly used by utility code, but it's more helpful for this to be the canonical listing and have FiolinFormComponent be infered.
Type assertion helper
Type assertion that second part of FiolinFormComponentElement extends HTMLElement
Union type of all the form components
The type tags for components
For utility code that manipulates forms, it's helpful to have a way to refer to components. Name + optional value is an intuitive way to identify form components, and it's always possible to set up a form in such a way that any given component can be uniquely identified this way.
name: string
The name of the component
value?: string
The (optional) value of the component. This is only used for components where multiple components are intended to share a name (e.g., RADIOs and BUTTONs).
Common options for all form components.
title?: string
Title (controls tooltip text)
hidden?: boolean
Is this component (initially) hidden?
onpointerdown?: boolean
Fire events on pointer down?
onpointerup?: boolean
Fire events on pointer up?
onpointermove?: boolean
Fire events on pointer move?
onpointerover?: boolean
Fire events on pointer over?
onpointerout?: boolean
Fire events on pointer out?
onpointerenter?: boolean
Fire events on pointer enter?
onpointerleave?: boolean
Fire events on pointer leave?
onpointercancel?: boolean
Fire events on pointer cancel?
ongotpointercapture?: boolean
Fire events on pointer capture?
onlostpointercapture?: boolean
Fire events on loss of pointer capture?
onclick?: boolean
Fire events on click?
Common options for all form input components.
disabled?: boolean
Is this component (initially) disabled?
onchange?: boolean
Fire events on change?
oninput?: boolean
Fire events on input?
Partialize first element
Pairs of types where the non-type fields are optionalized
The interface for maps that use FiolinFormComponentIds as keys.
get(id: FiolinFormComponentId): T | undefined
Retrieve the value associated with the id; returns undefined if missing.
has(id: FiolinFormComponentId): boolean
Check if there is a value associated with the id.
A div (to make a row or column of components).
type: 'DIV'
Type id
name?: string
Optional name. Does not affect form submission, but is needed for interactive for updates.
dir: 'ROW' | 'COL'
Direction (as a flex-row-wrap or flex-col-wrap)
children: FiolinFormComponent[]
The children in the row
A label (implicitly for whatever it's wrapping)
type: 'LABEL'
Type id
name?: string
Optional name. Does not affect form submission, but is needed for interactive for updates.
text: string
The text of the label
child: FiolinFormComponent
The wrapped child component
An input type="checkbox" element
type: 'CHECKBOX'
Type id
name: string
The name of the arg to associate with this value
value?: string
The (optional) value to associate with this checkbox
checked?: boolean
Whether to begin with this box checked
An input type="color" element
type: 'COLOR'
Type id
name: string
The name of the arg to associate with this value
value?: string
The (optional) initial value
An input type="date" element
type: 'DATE'
Type id
name: string
The name of the arg to associate with this value
value?: string
The (optional) default value to fill it with (YYYY-MM-DD)
required?: boolean
Is a (non-empty) value required?
min?: string
Minimum allowed value (YYYY-MM-DD)
max?: string
Maximum allowed value (YYYY-MM-DD)
step?: number
Step-size for selector (in number of days)
An input type="datetime-local" element
type: 'DATETIME_LOCAL'
Type id
name: string
The name of the arg to associate with this value
value?: string
The (optional) default value to fill it with (YYYY-MM-DDTHH:mm)
required?: boolean
Is a (non-empty) value required?
min?: string
Minimum allowed value (YYYY-MM-DDTHH:mm)
max?: string
Maximum allowed value (YYYY-MM-DDTHH:mm)
step?: number
Step-size for selector (in number of seconds)
An input type="email" element
type: 'EMAIL'
Type id
name: string
The name of the arg to associate with this value
value?: string
The (optional) default value to fill it with
multiple?: boolean
Allow multiple emails (comma separated)
pattern?: string
The regex to validate against
required?: boolean
Is a (non-empty) value required?
placeholder?: string
Placeholder to show if it's empty
size?: number
The size in characters
An input type="file" element. Can optionally serve as a submit button too. Files end up in inputs and file names show up in the args given to the script (the paths are rewritten to be relative to pyodide filesystem).
type: 'FILE'
Type id
name?: string
Optional name for this argument.
multiple?: boolean
Allow multiple files. Only makes sense if the script can accept >=1 files. (And using this component at all only makes sense if )
accept?: string
By default, inherits accept from the script's inputAccept, but it can be optionally overridden on a per-file component basis.
submit?: boolean
Trigger form submission upon file choice.
An input type="number" element
type: 'NUMBER'
Type id
name: string
The name of the arg to associate with this value
value?: number
The (optional) default value to fill it with
required?: boolean
Is a (non-empty) value required?
placeholder?: string
Placeholder to show if it's empty
min?: number
Minimum allowed value
max?: number
Maximum allowed value
step?: number
Step-size for selector
An input type="radio" element
type: 'RADIO'
Type id
name: string
The name of the arg to associate with this value; radio buttons with the same name are a mutually exclusive set of options.
value: string
The value to associate with this radio button. Unlike most form inputs, multiple radio buttons share a name, so for them, value is also used to identify them.
checked?: boolean
Whether to begin with this option selected
required?: boolean
Is a selection of one of the radio buttons sharing this name required?
An input type="range" element
type: 'RANGE'
Type id
name: string
The name of the arg to associate with this value
value?: number
The (optional) default value to fill it with
min: number
Minimum allowed value
max: number
Maximum allowed value
step?: number
Step-size for selector
An input type="tel" element
type: 'TEL'
Type id
name: string
The name of the arg to associate with this value
value?: string
The (optional) default value to fill it with
pattern?: string
The regex to validate against
required?: boolean
Is a (non-empty) value required?
placeholder?: string
Placeholder to show if it's empty
size?: number
The size in characters
An input type="text" element
type: 'TEXT'
Type id
name: string
The name of the arg to associate with this value
value?: string
The (optional) default value to fill it with
pattern?: string
The regex to validate against
required?: boolean
Is a (non-empty) value required?
placeholder?: string
Placeholder to show if it's empty
size?: number
The size in characters
An input type="time" element
type: 'TIME'
Type id
name: string
The name of the arg to associate with this value
value?: string
The (optional) default value to fill it with (HH:mm or HH:mm:ss)
required?: boolean
Is a (non-empty) value required?
min?: string
Minimum allowed value (HH:mm or HH:mm:ss)
max?: string
Maximum allowed value (HH:mm or HH:mm:ss)
step?: number
Step-size for selector (in number of seconds)
An input type="url" element
type: 'URL'
Type id
name: string
The name of the arg to associate with this value
value?: string
The (optional) default value to fill it with
pattern?: string
The regex to validate against
required?: boolean
Is a (non-empty) value required?
placeholder?: string
Placeholder to show if it's empty
size?: number
The size in characters
An select element
type: 'SELECT'
Type id
name: string
The name of the arg to associate with this value
options: FiolinFormSelectOption[]
The options
multiple?: boolean
Can multiple options be selected?
required?: boolean
Is a non-empty choice required?
An option within a select
text: string
The text in the option component
value?: string
The value to be submitted when it's selected (defaults to the text)
selected?: boolean
Is this selected by default?
A (submit) button element
type: 'BUTTON'
Type id
text: string
The text on the button
name?: string
The name of the arg to associate with this value (optional unlike others)
value?: string
The value to be submitted when it's clicked (optional, but must be present if name is, and vice versa). Note that the id for a button includes both the name and value.
disabled?: boolean
Is this component (initially) disabled?
An output element
type: 'OUTPUT'
Type id
name: string
The name (used to identify the component; doesn't contribute to form submission).
value?: string
Optional initial value.
A canvas element
type: 'CANVAS'
Type id
name: string
The name (used to identify the component; doesn't contribute to form submission).
height: number
The initial height.
width: number
The initial width.
hidden?: boolean
Is this component (initially) hidden?