Calculator AI provides 29 option types that cover every kind of input your customers might need — from simple text fields to interactive color pickers and file uploads. This reference lists every type, grouped by category. To add an option, open a calculator in the editor, go to Calculator Editor → Options & Pricing, and click + Add option.
Text Box — A single-line text field. Use it for short entries like names, monogram initials, or custom engraving text.
Text Area — A multi-line text field with a resizable input area. Use it when customers need to enter longer content such as a personalized message, special instructions, or a paragraph of text.
Email — A single-line text field that validates email format. Use it when you need to collect a valid email address — for example, a gift recipient's email for digital delivery.
Number Input — A numeric entry field with configurable minimum, maximum, step increment, and decimal places. Use it for precise numeric values like custom measurements, counts, or quantities where you need to enforce boundaries.
Slider — A visual range slider that customers drag to select a numeric value. You can set the min, max, step, and optionally show tick marks along the track. Use it when you want a more visual way to pick a number within a defined range.
Quantity — A quantity selector that can render as a numeric input, a dropdown list, or a radio-button list. Use it for straightforward "how many" questions where you want to control the display style.
Dropdown — A select list that opens a menu of choices. When the list is long, you can enable a built-in search bar so customers can filter options by typing. Use it for selections with many values where screen space is limited.
Radio Button — A set of mutually exclusive options displayed as radio circles. You can configure the number of columns (auto, 1, 2, 3, or 4) to control the layout. Use it when customers need to pick exactly one option and you want all choices visible at once.
Switch — An on/off toggle that represents a boolean value. Use it for simple yes/no choices like "Add gift wrapping" or "Include rush processing."
Checkbox — A group of checkboxes that allows multiple selections. You can set a minimum and maximum number of allowed selections and configure the column layout. Use it when customers can choose more than one item from a list, such as toppings, add-ons, or features.
Button — A group of selectable buttons displayed inline. Buttons can operate in single-select or multi-select mode, with optional min/max selection limits and configurable columns. Use it for visually prominent choices like size selectors or style pickers.
Color Swatch — Displays color options as filled circles, squares, or rounded squares. Customers click a color to select it. You can allow multiple selections, set min/max limits, show or hide labels (always, on hover, or hidden), and customize the swatch width, height, and shape. Use it for color choices like paint colors, fabric colors, or product finishes.
Image Swatch — Displays image thumbnails in the same circle, square, or rounded-square format as color swatches. All the same layout and selection settings apply (multiple selections, min/max, labels, columns, dimensions, aspect ratio). Use it when each option is best represented by a picture — for example, patterns, materials, or product style previews.
Length — A numeric input paired with a unit selector. Each unit entry includes a label and a conversion factor so the calculator can normalize values. Use it for single-dimension measurements like ribbon length or border width.
Area — Works the same way as Length but is intended for two-dimensional measurements. Define unit entries with labels and factors for area units (sq ft, sq m, etc.). Use it when customers specify a surface area such as flooring, wallpaper, or fabric.
Volume — A measurement input for three-dimensional quantities. Define volume unit entries with labels and factors (cu ft, liters, gallons, etc.). Use it for products sold by volume like soil, concrete, or liquids.
Weight — A measurement input for mass. Define weight unit entries with labels and factors (lb, kg, oz, g, etc.). Use it when the product price depends on weight, such as bulk food, metal, or shipping materials.
Dimension — Collects multiple named dimension entries in a single option — for example, Width, Height, and Depth. Each dimension has its own label and value. Use it when a product needs several related measurements entered together, like a custom box or frame.
Date Picker — A calendar-style date selector. Choose from six display formats (e.g., MM/DD/YYYY, DD-MM-YYYY). You can disable past dates, disable specific weekdays (e.g., no weekends), and set a minimum number of days from today. Use it for delivery dates, event dates, or reservation scheduling.
Time Picker — A time selector available in 12-hour (AM/PM) or 24-hour format. Use it alongside the date picker for scheduling, or on its own when you need a specific time — like a pickup time or appointment slot.
Color Picker — A full hex-color selector that lets customers choose any color. You can optionally provide a preset palette of suggested colors. Use it when the color choice is open-ended, such as custom printing or paint mixing.
Font Picker — A searchable font selector that can include all Google Fonts or a curated list of specific fonts you define. A live preview shows each font's appearance. Use it for products with custom text where the customer picks a typeface — like signs, invitations, or apparel.
File Upload — Lets customers attach one or more files. You configure accepted file types (e.g., .jpg, .png, .pdf), maximum file size, and minimum/maximum number of files. Use it when customers need to supply artwork, logos, reference photos, or documents.
Display types do not collect input from the customer. They are layout and informational elements you place between options.
Content — A block of HTML or plain text inserted into the calculator layout. You can also generate content using AI. Use it for instructions, disclaimers, promotional messages, or any rich-text content you want customers to see inline.
Heading — A text heading rendered at a configurable level from H1 through H6. Use it to visually separate sections of your calculator, like "Measurements," "Extras," or "Delivery."
Divider — A horizontal line with configurable thickness. Use it as a simple visual separator between groups of options.
Spacer — An empty vertical space with configurable height in pixels. Use it to add breathing room between options or sections without a visible line.
Calculation — Displays the result of a formula using a customizable display-format string. For example, you can show "Estimated weight: {value} lbs" where {value} is computed by a formula. Use it to surface intermediate calculations or totals that help the customer understand pricing.
Modal — A popup dialog with a title and content body. The customer clicks a trigger to open it. Use it for detailed information that doesn't need to be visible at all times — like terms and conditions, size guides, or detailed instructions.