Calculator Field Types
Learn about all the field types available in Calculator apps, optimized for mathematical computations and calculations.
Overview
Minivolve offers a variety of field types to help you create powerful, customized calculator apps. Each field type serves a specific purpose, from collecting different kinds of input to displaying information and calculation results.
This guide provides details about each available field type, including:
- When to use each field type
- Configurable properties
- How to work with each field in formulas
- Best practices and examples
Input Fields
Input fields are used to collect numeric and selection data from users for calculations. Calculator apps focus on mathematical inputs and computations.
Calculator-Specific Fields
Calculator apps show only fields optimized for mathematical operations. Text input fields (email, phone, long text) are available exclusively in Form apps for data collection purposes.
Number Field
The Number field allows users to enter numeric values. It's the most common input field for calculators.
Properties:
- Label: The field name shown to users
- Default Value: Pre-filled value when the app loads
- Placeholder: Text shown when the field is empty
- Min/Max Value: Set allowed minimum and maximum values
- Step: Increment/decrement amount when using up/down arrows
- Required: Make the field mandatory
- Format: Display as currency, percentage, or plain number
- Decimal Places: Control precision of displayed values
Best for:
- Prices, quantities, rates, measurements
- Any numeric input needed for calculations
- Values that may need validation (min/max)
Example:
In formulas, reference as: Price
Checkbox Field
The Checkbox field provides a simple yes/no or true/false option. In calculations, checked boxes return a value of 1, and unchecked boxes return 0.
Properties:
- Label: The field name shown to users
- Default State: Whether the checkbox is checked by default
- Required: Make checking the box mandatory
Best for:
- Optional add-ons or features
- Yes/no conditions (e.g., "Include shipping?")
- Toggling sections of a calculation
- Single options that can be enabled/disabled
Example:
In formulas, reference as: AddExpressShipping
Value: 1 when checked, 0 when unchecked
Choice Field
The Choice field offers a set of mutually exclusive options. Users can select only one option from the group. In calculations, each option can have an associated numeric value.
Properties:
- Label: The field name shown to users
- Options: List of available choices
- Option Values: Numeric value associated with each option
- Default Selection: Option selected by default
- Required: Make selecting an option mandatory
- Layout: Vertical or horizontal arrangement
Best for:
- Single choice from multiple options
- Selection between different rates or categories
- When only one option can be valid at a time
Example:
In formulas, reference as: DeliveryOption
Value: The numeric value associated with the selected option
Dropdown Field
The Dropdown field provides a compact way to select one option from many choices. Like radio buttons, each option can have an associated numeric value for calculations.
Properties:
- Label: The field name shown to users
- Options: List of available choices
- Option Values: Numeric value associated with each option
- Default Selection: Option selected by default
- Placeholder: Text shown when no option is selected
- Required: Make selecting an option mandatory
Best for:
- Long lists of options (more than 5 choices)
- Conserving vertical space in your app
- Categories, product choices, or rate selections
Example:
In formulas, reference as: ProductCategory
Value: The numeric value associated with the selected option
Slider Field
The Slider field provides a visual way to select a number within a range. It's intuitive for users and works well for approximate values.
Properties:
- Label: The field name shown to users
- Min Value: The lowest selectable value
- Max Value: The highest selectable value
- Step: The increment between selectable values
- Default Value: Pre-selected position on the slider
- Show Value: Toggle display of the current numeric value
- Format: Display as currency, percentage, or plain number
Best for:
- Values within a fixed range
- When precise values are less important
- Interactive elements where users can see the impact of changes
- Loan amounts, time periods, percentages
Example:
In formulas, reference as: LoanTerm
Output Fields
Output fields display the results of calculations based on formulas that reference input fields.
Result Field
The Result field displays calculated values based on a formula you define. It's the primary way to show computation results to users.
Properties:
- Label: The field name shown to users
- Formula: The calculation expression that determines the result
- Format: Display as currency, percentage, number, or text
- Decimal Places: Control precision of displayed values
- Prefix/Suffix: Add text before or after the result (e.g., "$", "kg")
- Hide Value: Option to hide the result until a button is clicked
- Styles: Customize appearance to highlight important results
Best for:
- Displaying calculation outputs
- Showing totals, subtotals, or derived values
- Providing answers to the calculator's primary purpose
Example:
Formula example: Price * Quantity * (1 + TaxRate / 100)
Structural Fields
Structural fields help organize your calculator app and provide additional context to users.
Heading Field
The Heading field adds a title or section heading to your calculator. Use it to organize your app into logical sections.
Properties:
- Text: The heading content
- Size: H1 (largest) through H6 (smallest)
- Alignment: Left, center, or right
- Color: Custom text color
Best for:
- Creating app titles
- Dividing your app into sections
- Improving visual hierarchy
Example:
Order Details
Note: Heading fields are not used in calculations.
Paragraph Field
The Paragraph field adds descriptive text to your calculator. Use it to provide instructions, explanations, or additional context.
Properties:
- Text: The paragraph content (supports basic formatting)
- Alignment: Left, center, or right
- Size: Small, medium, or large
- Color: Custom text color
Best for:
- Providing instructions
- Explaining how a calculation works
- Adding context or additional information
- Displaying disclaimers or notes
Example:
Enter your order details below. The calculator will automatically add applicable taxes and shipping costs to your total.
Note: Paragraph fields are not used in calculations.
Image Field
The Image field adds visual elements to your calculator. Use it to display product images, diagrams, or illustrations that enhance understanding.
Properties:
- Image: Upload from your device or select from media library
- Caption: Optional text description below the image
- Alt Text: Accessibility description for screen readers
- Alignment: Left, center, or right
- Max Width: Control the image's maximum display size
- Border: Add an optional border around the image
Best for:
- Product visualizations
- Explanatory diagrams or charts
- Logo or branding elements
- Visual examples related to your calculator
Example:
Product dimensions diagram
Note: Image fields are not used in calculations.
Container Field
The Container field groups other fields together for organizational purposes. Containers are invisible structural elements that help organize complex forms and provide logical grouping.
Properties:
- No configurable properties - containers are purely structural
- Automatically manages child field relationships
- Invisible in preview/embed views
Key Features:
- Groups related fields together logically
- Fields can be dragged into and out of containers
- Cannot be nested (containers cannot contain other containers)
- When deleted, all contained fields are also deleted
- No visual styling or customization options
Best for:
- Organizing complex forms into logical sections
- Grouping related input fields together
- Managing field relationships
- Creating reusable field groupings
Example:
In the builder: Container shows as a minimal area for dropping fields
In preview/embed: Container is completely invisible, only child fields are shown
Working with Fields in Formulas
Creating effective calculators requires understanding how to use different field types in formulas.
Basic Formula Structure
Formulas in Minivolve are used in Result fields to perform calculations based on input values. You reference fields by their labels, and combine them with operators and functions.
Example Formula:
Price * Quantity * (1 + TaxRate / 100)
This formula calculates the total cost by multiplying the price by quantity and adding tax.
Field Type Values in Formulas
Different field types return different kinds of values when used in formulas:
| Field Type | Value in Formulas | Example |
|---|---|---|
| Number | Numeric value | Price * 2 |
| Checkbox | 1 (checked) or 0 (unchecked) | Price + (ExpressShipping * 15) |
| Choice | Numeric value of selected option | Price + ShippingOption |
| Dropdown | Numeric value of selected option | BasePrice * CategoryMultiplier |
| Slider | Numeric value of slider position | Loan * (1 + (InterestRate / 100)) |
Conditional Logic
You can use conditional logic in your formulas to create more dynamic calculations:
IF Function Example:
IF(Quantity > 10, Price * Quantity * 0.9, Price * Quantity)
This formula applies a 10% discount when the quantity is greater than 10.
For more information on using functions and complex formulas, see the Formula Guide.
Best Practices
Follow these guidelines to create effective, user-friendly calculator apps:
Field Organization
- Group related fields together using headings and container fields
- Use container fields to create logical groupings without visual clutter
- Use headings to create clear sections
- Place input fields before the related result fields
- Use a logical order that matches how users think about the calculation
Clear Labeling
- Use descriptive, concise labels for all fields
- Add help text for complex inputs
- Use placeholders to provide examples of expected input
- Include units of measurement in labels when appropriate (e.g., "Height (cm)")
Input Validation
- Set appropriate min/max values for number fields
- Mark required fields when input is necessary for the calculation
- Provide sensible default values when possible
- Use appropriate step values for incremental inputs
Field Selection
- Choose the right field type for each input need
- Use dropdowns for long lists of options, choice fields for fewer options
- Consider sliders for ranges when precision is less important
- Use checkboxes for optional features or add-ons
Result Presentation
- Make result fields visually distinct from input fields
- Use appropriate formatting (currency, percentage, etc.)
- Set appropriate decimal places for precision
- Add explanatory text near complex results
Start Building Your Calculator
Now that you understand the different field types available in Minivolve, you're ready to create powerful, custom calculators for your users. Combine these field types with formulas to build exactly what you need.