Calc

Use this unstyled webcomponent to display the outcome of a given formula. Create dynamic calculations (useful for check-out views or similar scenarios) by associating it with an input field via the value property.

'value', // id of a text or number input
'formula', // calculation as a string, eg. '3 * 3 / value'
'append', // string to append
'prepend', // string to prepend
'fraction-digits' => 0, // numbers of digits after delimiter
'locale' => 'en-US', // affects number formatting like type of delimiter
<x-inputField id="calc-input-demo" value="3" class="w-max" />
<x-calc
    value="#calc-input-demo"
    formula="value * 3"
    append="€"
    fraction-digits="2"
    locale="de-DE"
/>