Input Widget

The input widget is the primary user input field. It will output (by default) an empty box/cell that requires user input for some calculations. Behaves similarly to a cell in Microsoft Excel.

UI Experience

Primary user input field
Outputs an empty box/cell for user data entry
Accepts numerical values, text, or formulas

Data Organization

Behaves similarly to a cell in Microsoft Excel
Can store and reference values throughout the template

Watch the tutorial: Create an Input Widget

Visual Presentation

Because the input widget is fairly simple and is only an interface for the user to input data, there is no specific section associated to the core functions in the widget. Any section used in the input widget is used in other widgets as well.

Example Code

{
  "type": "sheetTemplateWidgets",
  "attributes": {
    "type": "input",
    "label": "Cross-section Width",
    "symbol": "b",
    "units": "mm",
    "export": false,
    "visibleIf": "",
    "checks": [],
    "defaultValue": "300",
    "referenceId": "width",
    "references": "AS4100:2020 Cl 5.1",
    "description": "Width of the cross-section",
    "authorNotes": "Standard width input"
  }
}

Parameters

Key	Type	Default	Required	Description
`type`	string	-	Yes	Must be “input”
`label`	string	-	Yes	The name of widget
`symbol`	string (KaTeX)	-	Yes	Symbol for the widget
`units`	string	-	No	Units for the widget
`referenceId`	string	-	Yes	Unique reference ID
`export`	boolean	false	No	Export for load linking
`visibleIf`	string	true	No	Visibility condition
`checks`	array	[]	No	Validation checks
`defaultValue`	string	-	No	Default value or formula
`description`	string	-	No	User-facing description
`references`	string	-	Yes	Code/standard reference
`authorNotes`	string	-	No	Internal notes
`referenceImage`	string	-	No	Supporting image

Common Use Cases

Basic Numerical Input

{
  "type": "input",
  "label": "Length",
  "symbol": "L",
  "units": "m",
  "defaultValue": "3.0",
  "referenceId": "length"
}

Text Input

{
  "type": "input",
  "label": "Project Name",
  "symbol": "",
  "units": "",
  "referenceId": "projectName"
}

Conditional Visibility

{
  "type": "input",
  "label": "Wind Load",
  "symbol": "W",
  "units": "kPa",
  "visibleIf": "includeWind == true",
  "referenceId": "windLoad"
}

Validation Checks

Input widgets can include validation checks to ensure data quality:

{
  "checks": [
    {
      "condition": "width > 0",
      "message": "Width must be positive"
    },
    {
      "condition": "width <= 1000",
      "message": "Width exceeds maximum allowed (1000mm)"
    }
  ]
}

Best Practices

Use clear, descriptive labels
Include appropriate units
Set sensible default values
Add validation checks for critical inputs
Use visibility conditions to simplify the interface
Include references to relevant standards

Examples from Current Calculators

ReferenceId	Calculator
`alpha_v`	EU Steel Column

Widgets

Advanced Widgets

Sections & Tables

Export & Print

Widget Core Function

UI Experience

Data Organization

Visual Presentation

Example Code

Parameters

Common Use Cases

Basic Numerical Input

Text Input

Conditional Visibility

Validation Checks

Best Practices

Examples from Current Calculators

Widgets

Advanced Widgets

Sections & Tables

Export & Print

​Widget Core Function

​UI Experience

​Data Organization

​Visual Presentation

​Example Code

​Parameters

​Common Use Cases

​Basic Numerical Input

​Text Input

​Conditional Visibility

​Validation Checks

​Best Practices

​Examples from Current Calculators

Widget Core Function

UI Experience

Data Organization

Visual Presentation

Example Code

Parameters

Common Use Cases

Basic Numerical Input

Text Input

Conditional Visibility

Validation Checks

Best Practices

Examples from Current Calculators