> ## Documentation Index
> Fetch the complete documentation index at: https://calcs.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget Types Overview

> Understanding widgets as the building blocks of Calcs.com templates

## What is a Widget?

Widgets are powerful tools used for representation, calculation, and organization of data in the calculator builder. You can think of widgets as the building blocks of every template. All widgets have a certain set of inputs (either entered by the user or obtained from another widget in the template), and a certain set of outputs which could be as simple as creating an interface for data entry or as complicated as a table with multiple columns and rows.

## Widget Main Functions

<CardGroup cols={2}>
  <Card title="Input Interface" icon="keyboard">
    * Scalar data entry
    * Data selection
    * Table creation
  </Card>

  <Card title="Data Organization" icon="database">
    * Structure complex data
    * Manage relationships
    * Control visibility
  </Card>

  <Card title="Calculations" icon="calculator">
    * Mathematical computations
    * Conditional statements
    * Matrix manipulation
  </Card>

  <Card title="Visual Display" icon="image">
    * Text and labels
    * Images and diagrams
    * Graphs and charts
  </Card>
</CardGroup>

## Widget Interfaces

Widgets are built to have two interfaces:

### Preview Mode

For end users - summarizes important information meant for the user to see, comprehend, and input data.

### Pause Mode

For engineers - to edit their widgets in the template editor.

## Widget Components in Preview Mode

When expanded, widgets typically display:

1. **Widget Description** - Explanation of the widget's purpose
2. **Formula Reference** - Mathematical formulas used
3. **Reference Image** - Visual aids and diagrams
4. **Checks** - Validation and verification rules

## Widget Components in Pause Mode

All widgets share these common sections:

1. **Widget identifiers** - Label, symbol, referenceId
2. **Default values** - Initial values
3. **Visible if** - Visibility conditions
4. **Widget core function** - Type-specific functionality
5. **Checks** - Validation rules
6. **Description** - User-facing explanation
7. **References** - Code/standard references
8. **Reference Image** - Supporting visuals
9. **Author Notes** - Internal documentation
10. **Other Options** - Export, visibility settings

## Widget Selection Process

<img src="https://t6927027.p.clickup-attachments.com/t6927027/f64a4f58-6fc9-4b60-bddd-a9cb3658d7d6/Widget%20Selection%20Process%20(2).png" alt="Widget Selection Process" />

## Available Widget Types

<CardGroup cols={2}>
  <Card title="Input Widget" href="/calcs_builder/widgets/input_widget" icon="pen-to-square">
    Primary user input field for data entry
  </Card>

  <Card title="Equation Widget" href="/calcs_builder/widgets/equation_widget" icon="function">
    Performs calculations and displays results
  </Card>

  <Card title="Lookup Widget" href="/calcs_builder/widgets/lookup_widget" icon="list">
    Dropdown selection from predefined options
  </Card>

  <Card title="Table Widget" href="/calcs_builder/widgets/table_widget" icon="table">
    Multi-row, multi-column data management
  </Card>

  <Card title="Section Widget" href="/calcs_builder/widgets/section_widget" icon="folder">
    Organizes widgets into logical groups
  </Card>

  <Card title="Diagram Widget (Legacy)" href="/calcs_builder/diagrams/legacy_diagrams" icon="chart-line">
    Pre-built diagrams for common engineering visualizations
  </Card>

  <Card title="Custom Diagram Widget" href="/calcs_builder/diagrams/interactive_diagrams" icon="chart-pie">
    Creates interactive diagrams with custom elements
  </Card>

  <Card title="Image Widget" href="/calcs_builder/widgets/image_widget" icon="image">
    Displays static or conditional images
  </Card>

  <Card title="Remote Widget" href="/calcs_builder/widgets/remote_widget" icon="server">
    Connects to external solvers (FEA)
  </Card>
</CardGroup>

## Widget Management

### Adding Widgets

Drag the widget type from the upper left side of the builder in "Pause" mode to create a new widget.

### Editing Widgets

Use the buttons at the upper right corner of every widget to:

* Edit properties
* Delete widget
* Duplicate widget
* Move widget
* View information

## Display Options

At the bottom of each widget (Other Options), you can control:

<Accordion title="Display Settings">
  | Option                    | Description                                         |
  | ------------------------- | --------------------------------------------------- |
  | **Export**                | Enable for linking with other sheets (load linking) |
  | **Hidden**                | Hide widget from user view                          |
  | **Show in Summary**       | Display in "Standard" view                          |
  | **Show in Super Summary** | Include in one-page PDF print                       |
</Accordion>

## Best Practices

<Tip>
  * Choose the appropriate widget type for your data and calculation needs
  * Use meaningful labels and symbols for clarity
  * Add descriptions and references for documentation
  * Test visibility conditions thoroughly
  * Consider the user experience in both preview and print modes
</Tip>