When designing a calculator experience, it should always sit within its own ‘panel’. This helps contain the interactive elements and differentiates it from the rest of the page.
This panel can house a tab component at the top to split out varying functions within one calculator.
See more on the Tab component here
The main structure of the elements of the calculator are based on ‘Form Elements’ from the Digital CX Design System. Primarily Form Fields are used and these have a variety of states including focus states, error states as well as tool tips to contain helpful information. Fields that are not active until a selection is made are shown as inactive fields and greyed out.
The main call-to-action on the calculator uses the large button style with a calculator icon. The 'Clear' function uses a secondary button style and sits within the main panel. Extra links and prompts to help or other parts of Dow.com can be added.