Skip to main content
ShadcnUI
Navigation

Meter

A native scalar measurement within a known range, never task progress.

When to use it. Use it when its native HTML meaning matches the caller-owned form requirement.

Native baseline Explicit identity takes precedence over FormField values. Protected identity and ARIA relationships cannot be contradicted through global attributes. Exact fallback The native element, text, values, and document order remain usable without package CSS or JavaScript.

How it works

  • <.meter> Explicit identity takes precedence over FormField values. Protected identity and ARIA relationships cannot be contradicted through global attributes.
  • package CSS Package CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract.
  • gallery only Theme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :meter does not ship them.
  • application boundary Use Progress for completion of a task such as generating a report. Use Meter for a scalar measurement such as storage use; Meter never means task completion.

Examples use package semantic tokens in explicit light and dark scopes.

Accessibility and browser support

Visible labels and deterministic help and error relationships preserve the native accessible name and description contract.

Meter support and fallback
Feature Locked-engine evidence When missing
Native baseline Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix. The native element, text, values, and document order remain usable without package CSS or JavaScript.
Exact fallback The locked-engine matrix retains the documented native or static outcome. The native element, text, values, and document order remain usable without package CSS or JavaScript.

Application ownership and API

The application owns changesets, translation, validation timing, submission, persistence, authorization, pending transitions, focus, and outcomes.

Choosing the related control. Use Progress for completion of a task such as generating a report. Use Meter for a scalar measurement such as storage use; Meter never means task completion.

Public API Package source

Provenance

Catalogue identity forms.meter, adapted from unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63 under its MIT notice.

The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.

Separate scalar measurement into a native meter API with validated threshold attributes and browser-owned zone semantics.