Some comments, based purely on
https://www.calcverse.live/calculators/bmi.
• Keyboard accessibility is suffering, because the buttons aren’t associated with a form. Most notably, pressing Enter when one of the text boxes is selected doesn’t do anything. You should put everything inside a element, and then if you’re using , decide whether it’s type=button or type=submit.
• A tad more subjective, but actual radio buttons are better than the buttons you’ve used for Metric/Imperial.
• As it stands, they lack a keyboard focus indication. (And the submit button has poor focus indication.)
• People don’t talk about heights in inches. They talk about them in feet and inches. You want to be able to accept feet and inches as two separate inputs. Not everyone who knows that their height is X′Y″ knows that means 12X+Y inches, and even more will make a mistake in calculating that, or just give up.
• If you switch between metric and imperial, and there’s a number in height or weight, it should probably convert the number to the chosen scale.
• If you just recalculated on input rather than on submit click, the experience would probably be smoother.
• Colour contrast on “Category: Overweight” is definitely too low. “Category: Normal weight” is also a little too low; underweight and obese are fine.
• Consider sometimes what related information might be useful. Every BMI calculator lists the categories, but something I somehow haven’t ever seen and yet which would be very useful for giving someone something to aim for is a mapping: for a given height, what weights do the categories correspond to? e.g. for 200cm, underweight = 0–74kg, normal weight = 74–100kg, overweight = 100–120kg, obese = 120–∞kg. Consider visualisations too. And mentioning what the calculation actually is that is being performed. Calculations are simple. Presenting them well is the harder bit.