# General Overview

Build smart, flexible, and dynamic pricing forms with our intuitive **Cost Calculator**. With a variety of customizable elements at your fingertips, you can create everything from simple quotes to complex estimation tools — no coding required.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FOGUhovPt7c4XeBriClu6%2Fimage.png?alt=media&#x26;token=6f9514e3-50f1-4cb3-bc50-ac0236513d31" alt=""><figcaption><p>Calculator Elements on the Left Sidebar</p></figcaption></figure>

***

## Element Types

The calculator supports **22 distinct elements**, each designed to handle different types of input and interactivity. Here is the overview of the **Calculator Elements**:

### Input & Selection Fields

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>📝 <strong>Text Field</strong></td><td>Basic text input for user entries</td><td><a href="text-box">text-box</a></td></tr><tr><td>🔢 <strong>Quantity</strong></td><td>Number field ideal for item counts or units</td><td><a href="quantity">quantity</a></td></tr><tr><td>📂 <strong>Dropdown List</strong></td><td>Choose from a predefined list of options</td><td><a href="drop-down">drop-down</a></td></tr><tr><td>🖼️📂 <strong>Image Dropdown</strong></td><td>Dropdown with visual options for easy selection</td><td><a href="drop-down-with-image">drop-down-with-image</a></td></tr><tr><td>🔘<strong>Radio Buttons</strong> </td><td>Traditional single-option selector</td><td><a href="radio-button">radio-button</a></td></tr><tr><td>🖼️🔘<strong>Image Radio</strong></td><td>Radio buttons with images to guide user choice</td><td><a href="radio-button-1">radio-button-1</a></td></tr><tr><td>🔄<strong>Switch Toggle</strong></td><td>Sleek on/off toggle for binary choices</td><td><a href="toggle-button">toggle-button</a></td></tr><tr><td>☑️ <strong>Checkbox</strong></td><td>Tick boxes for multiple selections</td><td><a href="checkbox">checkbox</a></td></tr><tr><td>🖼️☑️<strong>Image Checkbox</strong></td><td>Visual checkboxes with image previews</td><td><a href="checkbox-1">checkbox-1</a></td></tr></tbody></table>

### Date & Time

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>📅 <strong>Date Picker</strong></td><td>Calendar input for selecting a date and date range</td><td><a href="date-picker-pro-feature">date-picker-pro-feature</a></td></tr><tr><td>⏰ <strong>Time Picker</strong></td><td>Time selection with dropdown-style interface</td><td><a href="time-picker-pro-feature">time-picker-pro-feature</a></td></tr></tbody></table>

### Range & Sliders&#x20;

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>🎛️ <strong>Basic Slider</strong></td><td>Drag-to-set a single value slider</td><td><a href="range-button">range-button</a></td></tr><tr><td>🎚️ <strong>Multi Range</strong></td><td>Select a range between two values</td><td><a href="multi-range">multi-range</a></td></tr></tbody></table>

### Other Smart Features

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>📤 <strong>File Upload</strong></td><td>Allow users to upload documents, images etc.</td><td><a href="file-upload">file-upload</a></td></tr><tr><td>📍 <strong>Geolocation</strong></td><td>Calculate values based on the entered location from Google Maps</td><td><a href="geolocation-pro-feature">geolocation-pro-feature</a></td></tr><tr><td>🧮 <strong>Formula Field</strong></td><td>Calculate values dynamically using math expressions </td><td><a href="total">total</a></td></tr><tr><td>✅ <strong>Validated Form</strong></td><td>Enforce input rules for  email, phone and URLs</td><td><a href="validated-form">validated-form</a></td></tr><tr><td>🧩 <strong>HTML Element</strong></td><td>Embed custom HTML code (for text, images, embeds, etc.)</td><td><a href="html">html</a></td></tr></tbody></table>

### Grouping Elements

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>➖ <strong>Divider (line)</strong></td><td>Visually separate sections of your form/calculator</td><td><a href="line">line</a></td></tr><tr><td>🗂️ <strong>Section</strong> (<strong>Group) Field</strong></td><td>Combine multiple fields into one cohesive block</td><td><a href="group-field-pro-feature">group-field-pro-feature</a></td></tr><tr><td>🔁 <strong>Repeater</strong></td><td>Let users duplicate a set of fields as needed</td><td><a href="repeater-pro-feature">repeater-pro-feature</a></td></tr><tr><td>📑 <strong>Page Breaker</strong></td><td>Split long forms into multiple steps for a cleaner experience</td><td><a href="page-breaker-pro-feature">page-breaker-pro-feature</a></td></tr></tbody></table>

***

You can learn how to **build a calculator using these elements** by following this manual:

{% content-ref url="../plugin-features/creation-of-cost-calculator" %}
[creation-of-cost-calculator](https://docs.stylemixthemes.com/cost-calculator-builder/plugin-features/creation-of-cost-calculator)
{% endcontent-ref %}