Demos

Change weight or height by typing or with the − and + buttons. Every result updates as you go.

"use client"

import { BodyMeasurements } from "@workspace/ui/tools/body-measurements"

export function BodyMeasurementsDemo() {
  return (
    <div className="mx-auto flex w-full justify-center">
      <BodyMeasurements />
    </div>
  )
}

Usage

Use body measurements when a result or a dose depends on body size. It shows:

• BMI — Weight in kilograms over height in metres squared, with its WHO category.
• BSA — Body surface area in square metres, by three formulas.

Import it from @workspace/ui/tools/body-measurements.

BMI categories

BSA formulas

W is weight in kilograms and H is height in centimetres.

Notes

• The BMI categories are for adults. Assess children and adolescents with BMI-for-age percentiles instead.
• Weight is in kilograms and height in centimetres.
• Results show a dash until both fields are above zero.
• The reset button goes back to the default weight and height.

Body measurement helpers

The maths is in @workspace/ui/lib/body-measurements, so you can use it without the UI.

bodySurfaceArea uses Mosteller unless you pass "du-bois" or "haycock". bmiCategoryLabels turns a category into text, such as Obesity class I. calculateBodyMeasurements(weight, height) from the component file returns the BMI, its category, and all three BSA values at once, or null when either value is not above zero.

Examples

Custom values

Pass defaultWeight and defaultHeight to start from someone's own measurements.

"use client"

import { BodyMeasurements } from "@workspace/ui/tools/body-measurements"

export function BodyMeasurementsDefault() {
  return (
    <div className="mx-auto flex w-full justify-center">
      <BodyMeasurements defaultWeight={60} defaultHeight={165} />
    </div>
  )
}

Child

A 20 kg child, 110 cm tall. Use the Haycock BSA, and read BMI against BMI-for-age percentiles rather than the adult category.

"use client"

import { BodyMeasurements } from "@workspace/ui/tools/body-measurements"

export function BodyMeasurementsChild() {
  return (
    <div className="mx-auto flex w-full justify-center">
      <BodyMeasurements defaultWeight={20} defaultHeight={110} />
    </div>
  )
}

Props

Unlisted props pass through to the Card that wraps the calculator.

BodyMeasurements

BodyMeasurementsResult