GLIDE/GEL Frontend Field Types — HTML Mapping Reference

This document shows how GLIDE/GEL field type values map to basic HTML form elements. It is intended to guide the rendering of fields in a basic UI.

Table of Contents

  1. 1. Field Types & HTML Elements
  2. 2. Extended Fields vs. Non-Extended Fields
  3. 3. Minimal Sample Layout
  4. 4. References

1. Field Types & Corresponding HTML Elements

Field Type HTML Element Additional Notes
string <input type="text"> Handles short, single-line text.
text <textarea> Use for multi-line textual content. If code is specified, show an editor for that language.
integer <input type="number"> (with integer-only constraints) Parse as an integer. Extra constraints or step increments can be applied if needed.
number <input type="number"> Allows decimal entry. May also show numeric constraints (e.g. min, max).
boolean <input type="checkbox"> Represents true/false in the UI.
date <input type="date"> or <input type="datetime-local"> Allows user to pick a date/time. Could also be a text input for ISO date/time.
duration <input type="text"> Represents time spans (e.g. "5 days" or numeric milliseconds). No special HTML type for durations.
dictionary Key-value table or repeating group of <input> Multiple entries where each key is typically a string and each value is a string. Display as a small grid or list of rows.
password <input type="password"> Used for concealed fields. Typically no references allowed.
file <input type="url"> or generic text box for URLs Accepts a valid URL string or expression referencing one.

2. Extended Fields vs. Non-Extended Fields

If a field definition has extendable: true, additional fields may appear in an "extended" object. This can be rendered similarly to the base fields with the same mappings above.

3. Minimal Sample Layout

Example illustrating a possible arrangement: 

{ type: "string", required: true } => <input type="text" ...>
{ type: "text", code: "json", required: false } => <textarea ...> (with an optional code viewer)
{ type: "boolean" } => <input type="checkbox" ...>
{ type: "integer" } => <input type="number" pattern="[0-9]+" />
{ type: "dictionary" } => [key: <input> , value: <input>] repeated

4. References

Reference Description Link
GLIDE/GEL Docs Further explanation of field definitions and typed validations. Open
Frontend UI Examples Sample code showing how these mappings look in an actual React/Vue page. View Code
End of Reference
Consult the main GLIDE/GEL documentation for advanced usage or custom fields.
« Back to Field Types | Next Manual »