Calculated value
Two flavors of computed-value display:
CalculatedValueCard — small, inline, label + value + meta. For ambient computed values that live alongside other content (a copay estimate, a next-refill date) without commanding attention.
CalculatedResultCard — dramatic, tall, tone-coded big number with a slot-machine reveal. The intake-form BMI pattern. For results where the calculation is the message — BMI, eligibility score, treatment fit. Tone color (green / gold / red) lives on the number itself; chrome stays neutral so multiple results can sit together without competing.
import from @halwel/ui/components/forms/CalculatedValueCard, CalculatedResultCard
Variants
Within ideal range
Healthy BMI range: 18.5–24.9 kg/m²Edit any field to watch the slot-machine reveal fire. Tone updates with the value: <17.5 alert · 17.5-18.5 caution · 18.5-25 healthy · 25-30 caution · ≥30 alert.
Enter height and weight to calculate.
Healthy BMI range: 18.5–24.9 kg/m²Shown when no value yet. The white pill bar telegraphs 'result will appear here'.
Estimated monthly cost based on your plan.
Pass animateOnChange={false} for non-clinical values that don't need the reveal drama (copay estimates, etc.)
The lightweight variant. Label-on-top / value / meta. Use when the computed value is supporting content, not the headline.