Input Components
ROI Studio provides several Input components for collecting assumptions and values from users.
Choosing the right Input type can make a Calculator easier to understand and interact with.
The available user-input components include:
Range Slider Input
Numerical Input
Radio Button Input
Dropdown Input
Multi Select Input
Dial Input
Toggle Yes / No
Each is designed for a different type of interaction.
Choosing an Input
Use this as a quick guide:
Range Slider Input
Users select a numeric value from a range
Numerical Input
Users enter or step through a precise number
Radio Button Input
Users choose one option and the choices should remain visible
Dropdown Input
Users choose one option from a compact list
Multi Select Input
Users can choose more than one option
Dial Input
Users adjust a numeric value using a dial
Toggle Yes / No
Users choose between two states
The Input type changes how the user interacts with the value. The resulting value can then be referenced by calculations elsewhere in the model.
Numeric Inputs
ROI Studio provides three primary numeric Input styles:
Range Slider Input
Numerical Input
Dial Input
Use these when users need to enter or adjust a numeric assumption.
Range Slider Input
Use a Range Slider Input when users should choose a value within a defined range.
For example:
Expected Automation Rate
or:
Average Handling Time Reduction
A slider can be useful when exploring scenarios because users can quickly move between different assumptions.
Numerical Input
Use a Numerical Input when a precise value is important.
For example:
Annual Calls
Number of Employees
Implementation Cost
Average Salary
This is generally preferable to a slider when the user needs to enter a specific number.
When configuring this component, the settings drawer may refer to it as:
Numerical Button
even though the Components panel calls it:
Numerical Input.
Dial Input
Use a Dial Input when you want users to adjust a numeric value through a dial-style interaction.
Like other numeric Inputs, the Dial can represent a value within a configured range.
Choose it when the interaction suits the experience you're designing rather than simply as a visual alternative to every numerical field.
Configure numeric Inputs
Range Slider, Numerical and Dial Inputs support settings including:
Initial Value
Minimum Value
Maximum Value
Step / Increment Value
Numerical display
Percentage display
Currency display
Prefix
Suffix
Styling
Tooltip
Visibility Condition
The exact presentation varies by component.
Initial Value
The Initial Value determines the starting value presented when the Calculator loads.
Choose a value that represents an appropriate starting assumption for the model.
Don't use the initial value to hide an assumption that should be explicitly considered by the user.
Minimum and Maximum
Use Minimum Value and Maximum Value to define the permitted range.
For example:
Automation Rate
Minimum: 0
Maximum: 100
or:
Annual Calls
Minimum: 0
Maximum: an appropriate upper boundary for the model.
Ranges should reflect plausible use of the Calculator.
Step / Increment
The Step / Increment Value determines how the numeric value changes.
For example:
A step of:
1
allows movement through whole numbers.
A step of:
5
moves in increments of five.
Choose an increment appropriate to the assumption.
Numeric formatting
Numeric Inputs can be displayed as:
Numerical
Percentage
Currency
Use the format that represents the actual meaning of the value.
For example:
Annual Technology Cost → Currency
Expected Reduction → Percentage
Number of Employees → Numerical
For more information, see Styling, Icons & Number Formats.
Choice Inputs
ROI Studio provides three Inputs for selecting from defined lists:
Radio Button Input
Dropdown Input
Multi Select Input
Each lets you define the choices available to the user.
Radio Button Input
Use a Radio Button Input when the user must choose one option and you want the available choices to remain visible.
For example:
Deployment Approach
Cloud
Hybrid
On-premise
Radio Buttons work particularly well when there are only a small number of important choices.
Dropdown Input
Use a Dropdown Input when the user should choose one option but displaying every choice simultaneously would take unnecessary space.
For example:
Region
or:
Business Unit
A Dropdown is particularly useful for longer lists.
Multi Select Input
Use a Multi Select Input when users should be able to choose more than one option.
This is the important distinction:
Radio Button
One choice.
Dropdown
One choice.
Multi Select
One or more choices.
Use Multi Select only when multiple simultaneous selections make sense for the calculation or experience.
Configure choice Inputs
When configuring a choice Input:
Enter the Display Label.
Add optional supporting detail.
Define the list of choices.
Give each choice the required text and value.
Configure defaults where supported.
Configure styling, tooltip and visibility.
Select Save.
Every required list field should be completed before saving.
Choice labels and values
Each choice needs understandable text and a usable value.
The text is what the user understands.
The value is what the Calculator can use.
For example:
Low
could represent one value,
Medium
another,
and:
High
another.
This allows a business-friendly choice to drive calculations behind the model.
Multi Select defaults
Multi Select includes configuration for its default selection behaviour.
The settings drawer can show:
List Component Choices (Select Single Default Choice)
Set defaults carefully so the initial state of the Calculator reflects the intended scenario.
Incomplete choice lists
If required choice fields haven't been completed, ROI Studio can display:
Please fill all list field.
Review the configured options and make sure every required field has been populated before saving.
Toggle Yes / No
Use Toggle Yes / No when the user needs to choose between two states.
For example:
Include Implementation Costs?
Use Existing Infrastructure?
Include Additional Benefits?
A Toggle is generally clearer than a list when the underlying decision is genuinely binary.
Toggles and conditional visibility
Toggle Inputs can be particularly useful for controlling conditional experiences.
For example:
Include Implementation Costs?
If Yes:
Implementation Cost appears.
If No:
Implementation Cost remains hidden.
This lets the Calculator adapt to the user's choices.
For more information, see Conditional Visibility & Calculate on Hidden.
Inputs in the Outputs area
Some adjustable Input-style components can also be added from the Outputs component group.
The source specifically confirms:
Range Slider Input
Numerical Input
can be positioned in the Outputs area.
This can be useful when an assumption needs to sit close to the result it affects.
For example:
Expected Improvement [slider]
↓
Annual Benefit £850,000
The component remains an adjustable value even though it is positioned alongside Outputs.
Formula references
Inputs receive a formula reference that allows their value to be used elsewhere in the model.
For example:
[Annual Calls]
can feed:
Calls Automated
which can feed:
Annual Saving
which can ultimately feed:
ROI
Choose Input labels carefully because clearly named assumptions make calculation models easier to understand and maintain.
For more information, see Creating & Editing Formulas.
Choosing between similar Inputs
Slider or Numerical Input?
Choose Range Slider when:
Exploration is important
The permitted range is meaningful
Users benefit from quickly adjusting scenarios
Choose Numerical Input when:
Precision matters
Users know the value they want to enter
The possible range is large
Radio Button or Dropdown?
Choose Radio Button when:
There are relatively few choices
Seeing all options helps the decision
The choice is important to the experience
Choose Dropdown when:
There are more choices
Space is limited
The options don't need to remain visible
Dropdown or Multi Select?
The deciding factor is whether more than one option can be selected.
One option → Dropdown
Multiple options → Multi Select
Use realistic ranges
For numeric Inputs, keep the:
Initial value
Minimum
Maximum
Step
aligned with realistic business scenarios.
Extremely broad ranges can make a Calculator harder to use and can produce scenarios that aren't meaningful.
The range should support exploration without implying that every mathematically possible value is a sensible business assumption.
Preview Input behaviour
Before publishing, Preview the Calculator and interact with every important Input.
Check:
Minimum and maximum values
Step behaviour
Default values
Percentage formatting
Currency formatting
Choice selection
Multi Select behaviour
Toggle behaviour
Visibility conditions
Downstream Outputs
Don't check Inputs only in isolation.
Their main purpose is to drive the model, so verify that changing them produces the expected calculation changes.
Best practices
When choosing Inputs:
Use Numerical Input when precision matters.
Use Range Slider when scenario exploration matters.
Use Radio Buttons for a small number of visible choices.
Use Dropdowns for longer single-choice lists.
Use Multi Select only when multiple choices are genuinely valid.
Use Toggle Yes / No for binary decisions.
Set realistic numeric ranges and increments.
Give every choice clear text and a usable value.
Use the correct number format.
Keep labels business-friendly.
Test how every important Input affects downstream results.
Last updated