npm · physical-quantity

physical-quantity

Framework-agnostic web components for engineering values with live unit conversion. Drop a single <script> tag into any HTML page.

570+Units
60+Categories
3Components
0Dependencies
CDN <script src="https://unpkg.com/physical-quantity@latest/dist/pq.umd.js"></script>
01
<uc-qty>

Single physical quantity with an interactive unit dropdown. Also aliased as <physical-quantity>.

Basic Default display with live unit selector 
<uc-qty
  value="25.4"
  unit="mm">
</uc-qty>
Decimal Places decimal-places="4" Control converted-value precision; integers drop trailing zeros 
<uc-qty
  value="1.6180339"
  unit="m"
  decimal-places="4">
</uc-qty>
Compact / Display-only show-unit-arrow="false" Hides the dropdown; renders value + unit label inline 
<uc-qty
  value="9.81"
  unit="m/s²"
  show-unit-arrow="false">
</uc-qty>
Length — Feet / Inches Converts to ft-in, cm, mm, m and more 
<uc-qty
  value="30.5"
  unit="in">
</uc-qty>
Mass kg · lb · oz · g · t · slug … 
<uc-qty
  value="5"
  unit="kg">
</uc-qty>
Temperature °C · °F · K · °R 
<uc-qty
  value="100"
  unit="°C">
</uc-qty>
Force N · lbf · kgf · kN · MN … 
<uc-qty
  value="100"
  unit="N">
</uc-qty>
Pressure psi · Pa · kPa · MPa · bar · atm … 
<uc-qty
  value="14.7"
  unit="psi">
</uc-qty>
Electric Current A · mA · μA · kA 
<uc-qty
  value="2.5"
  unit="A">
</uc-qty>
Power W · kW · MW · hp · BTU/h … 
<uc-qty
  value="746"
  unit="W">
</uc-qty>
Volume L · mL · gal · ft³ · m³ … 
<uc-qty
  value="3.785"
  unit="L"
  decimal-places="3">
</uc-qty>
02
Inline in Prose

Drop <uc-qty> directly into running text — readers click to convert without leaving context.

The column is tall and carries a design load of .

Operating temperature range: to .

Tank capacity is with a flow rate of .

03
<uc-qty-pair>

Two values sharing one unit category — both convert simultaneously with a single selector.

Dimensional values="AxB" Width × Height notation — common for 2D sizes 
<uc-qty-pair
  values="600x900"
  unit="mm">
</uc-qty-pair>
Coordinate values="(A, B)" Point / range notation for coordinates or spans 
<uc-qty-pair
  values="(12.5, 37.8)"
  unit="cm">
</uc-qty-pair>
With Precision decimal-places="3" Decimal precision is maintained across all converted values 
<uc-qty-pair
  values="1x2"
  unit="ft"
  decimal-places="3">
</uc-qty-pair>
Imperial Inches Converts between in, ft-in, mm, cm, m … 
<uc-qty-pair
  values="30.5x45.375"
  unit="in">
</uc-qty-pair>
04
<uc-qty-triplet>

Three values sharing one unit — ideal for 3-D dimensions (W × D × H).

Metric 3D W × D × H — all three convert in lockstep 
<uc-qty-triplet
  values="600x400x300"
  unit="mm">
</uc-qty-triplet>
Imperial 3D Converts to/from ft-in, cm, m, mm … 
<uc-qty-triplet
  values="10x20x30"
  unit="in">
</uc-qty-triplet>
High Precision decimal-places="4" Engineering-grade precision on all three values 
<uc-qty-triplet
  values="1x1x1"
  unit="m"
  decimal-places="4">
</uc-qty-triplet>
05
Attribute Reference

All HTML attributes supported across the three components.

Attribute Type Default Applies to · Description
value number required <uc-qty> — Initial numeric value to display
values string required <uc-qty-pair> <uc-qty-triplet> — "AxB" or "(A, B)" for pair; "AxBxC" for triplet
unit string required <uc-qty> <uc-qty-pair> <uc-qty-triplet> — Unit identifier, e.g. mm, kg, °C, A, psi
decimal-places integer 2 <uc-qty> <uc-qty-pair> <uc-qty-triplet> — Decimal precision of the displayed value; integers drop trailing zeros
show-unit-arrow boolean true <uc-qty> — Set false to hide the dropdown and render in compact, display-only mode