Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

primitive · meter

Native meter

Opt-in styles for native scalar measurements and their quality ranges.

Install with npx @madojs/ui@latest add meter.

Primitive

Meter

86 of 100
52 of 100
18 of 100

Composition

  • Use a labelled native meter with min, max, value and meaningful low/high/optimum ranges.

Public API

element meter
Native scalar measurement within a known range.
class mado-ui-meter
Cross-theme native meter presentation.

Detected public classes

  • .mado-ui-meter

Detected public CSS properties

  • --mado-ui-color-danger
  • --mado-ui-color-success-text
  • --mado-ui-color-surface-soft
  • --mado-ui-color-warning-text
  • --mado-ui-meter-critical
  • --mado-ui-meter-height
  • --mado-ui-meter-optimum
  • --mado-ui-meter-radius
  • --mado-ui-meter-suboptimal
  • --mado-ui-meter-track
  • --mado-ui-meter-width
  • --mado-ui-radius-full

Accessibility contract

  • Provide a visible label and textual value; color ranges must not be the only explanation.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.