---
title: "मीटर"
description: "दिखाता है कि कोई ज्ञात मान किसी ज्ञात रेंज में कहाँ है — इस्तेमाल हुआ स्टोरेज, बैटरी का चार्ज, कोई कोटा, पासवर्ड की मज़बूती — एक बार या रिंग के रूप में, जो प्रोग्रेस इंडिकेटर जैसा दिखता है, पर यह नहीं कहता कि कुछ चल रहा है।"
url: "https://tanrei.chnotchy.com/hi/components/meter/"
last_updated: 2026-10-23T21:17:12.000Z
---

# मीटर

> दिखाता है कि कोई ज्ञात मान किसी ज्ञात रेंज में कहाँ है — इस्तेमाल हुआ स्टोरेज, बैटरी का चार्ज, कोई कोटा, पासवर्ड की मज़बूती — एक बार या रिंग के रूप में, जो प्रोग्रेस इंडिकेटर जैसा दिखता है, पर यह नहीं कहता कि कुछ चल रहा है।

## अवलोकन

### इस्तेमाल

Web और React के उदाहरण मौजूदा स्पेक दिखाते हैं। SwiftUI, Compose, Flutter और React Native योजना में हैं: वे अभी मीटर नहीं देते।

**Web**

```html
<tanrei-meter value="0.62" label="इस्तेमाल हुआ स्टोरेज" value-text="15 GB में से 9.3 GB"></tanrei-meter>
<tanrei-meter value="37" max="50" label="भरी हुई सीटें" value-text="50 में से 37 सीटें"></tanrei-meter>

<!-- मान का क्या मतलब है, यह प्रोडक्ट तय करता है, और उसे शब्दों में भी कहता है। -->
<tanrei-meter value="0.85" status="warning" label="इस्तेमाल हुआ स्टोरेज" value-text="लगभग भरा हुआ: 15 GB में से 12.8 GB"></tanrei-meter>

<tanrei-meter variant="circular" size="small" value="0.62" label="बैटरी"></tanrei-meter>

<script type="module">
  import '@tanrei/web/components/meter';
  const meter = document.querySelector('tanrei-meter');
  meter.value = used / quota;
  meter.status = used / quota > 0.8 ? 'warning' : 'default';
</script>
```

**React**

```tsx
import { Meter } from '@tanrei/react';

<Meter value={used / quota} label="इस्तेमाल हुआ स्टोरेज" valueText={`${quotaText} में से ${usedText}`} />
<Meter value={seats} max={50} label="भरी हुई सीटें" valueText={`50 में से ${seats} सीटें`} />
<Meter
  value={used / quota}
  status={used / quota > 0.8 ? 'warning' : 'default'}
  label="इस्तेमाल हुआ स्टोरेज"
  valueText={used / quota > 0.8 ? `लगभग भरा हुआ: ${quotaText} में से ${usedText}` : `${quotaText} में से ${usedText}`}
/>
<Meter variant="circular" size="small" value={charge} label="बैटरी" />
```

## स्पेक

- Category: Communication
- Level: base
- Listing: default
- Page: https://tanrei.chnotchy.com/components/meter/
- Spec: https://github.com/chnotchy/tanrei/blob/main/specs/meter.spec.json

### Availability

| Design system | Has it | Notes |
| --- | --- | --- |
| Tanrei (`tanrei`) | Yes | — |
| Cupertino (Apple HIG-inspired) (`cupertino`) | Yes | — |
| M3 Expressive-like (Material 3 Expressive-inspired) (`m3-expressive-like`) | Yes | — |
| M3-like (Material 3-inspired) (`m3-like`) | Yes | — |

### Platforms

- Web: the element `<tanrei-meter>`, registered by importing `@tanrei/web` (or only its own module, `@tanrei/web/components/meter`).
- React: `Meter` from `@tanrei/react`.

| Platform | Name | Status |
| --- | --- | --- |
| Web | `tanrei-meter` | alpha |
| SwiftUI | `TanreiMeter` | planned |
| Jetpack Compose | `TanreiMeter` | planned |
| Flutter | `TanreiMeter` | planned |
| React Native | `Meter` | planned |

Names a platform gives in its own idiom:

| Spec | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
| --- | --- | --- | --- | --- | --- |
| `min` (prop) | `min` | `bounds.lowerBound` | `valueRange.start` | `min` | `min` |
| `max` (prop) | `max` | `bounds.upperBound` | `valueRange.endInclusive` | `max` | `max` |

Statuses: `planned` — In the inventory. Nothing shippable exists yet. `lagging` — An implementation of an earlier spec exists; it has not caught up with the current one. `alpha` — Implemented with tests. The API may still change. `beta` — Feature complete and at parity. Only fixes are expected. `stable` — Covered by semantic versioning. `deprecated` — Still shipped; scheduled for removal.

### Anatomy

- `track`: The full length of the bar, or the full circle of the ring: the whole range from min to max.
- `indicator`: The part of the track drawn in the indicator color of the meter's status: the fraction of the range up to the value. It meets the rest of the track, or stands a gap from it (separation).
- `stop-indicator` (optional): A dot at the end of a bar's track that marks where the range ends, drawn whenever its size is above 0.

### Props

| Prop | Type | Default | Web attribute | Description |
| --- | --- | --- | --- | --- |
| `variant` | `enum`: `linear`, `circular` | `"linear"` | `variant` | Linear is a bar that fills the width its layout gives it; circular is a ring of a fixed size, for tight places and beside text. A structural choice drawn by code, not a token axis, as the progress indicator's is. |
| `size` | `enum`: `small`, `medium`, `large` | `"medium"` | `size` | The bar's thickness or the ring's box, the progress indicator's three sizes by default (2 / 4 / 8 and 16 / 24 / 40). A design system may add values. |
| `separation` | `enum`: `auto`, `divider`, `gap` | `"auto"` | `separation` | How the indicator is told from the rest of its track. divider: drawn on the track with no space between them. gap: empty space between them. Auto takes comp.meter.track.separation, which follows the design system's choice. |
| `value` | `number` | `0` | `value` | Where the measured quantity stands, between min and max. Always a number: a meter has no unknown value, and a task under way is a progress indicator. |
| `min` | `number` | `0` | `min` | The low end of the range. |
| `max` | `number` | `1` | `max` | The high end of the range. |
| `status` | `enum`: `default`, `info`, `success`, `warning`, `error` | `"default"` | `status` | What the product says the value means, in the names the tag and the snackbar use: default draws the indicator in the meter's own color; info, success, warning and error in that status's color. The product decides it — the meter has no thresholds of its own — and it changes colors only: the words that say so are valueText's and the product's. |
| `label` | `string` | `""` | `label` | The accessible name: what is measured ("Storage used"). Required: a bar alone is not a name. |
| `valueText` | `string` | `""` | `value-text` | How assistive technology reads the value when a percentage is not the natural reading ("12.4 GB of 15 GB", "Strong"). Empty reads the platform's percentage. Where status means something, say it here too ("Almost full: 14.2 GB of 15 GB"). |

### States

`enabled`

### Accessibility

- Role: `meter`
- Labeling: label is the accessible name. valueText, when given, replaces the platform's percentage as the spoken value. A visible caption beside the meter is the product's composition; when it exists, use the same words as label. status is never announced: say in valueText what it means.
- Minimum target size: yes

- Not interactive: the meter takes no input and is never focusable (MTR-8), so the minimum target holds without extending anything.
- A meter shows where a value stands in a known range; it is not progress (WAI-ARIA APG, Meter: not for loading or percent completion) and not for a value without a meaningful maximum. A task under way is a progress indicator.
- The value is read from the boundary between indicator and track, so every indicator color — default and the four statuses — must stay at least 3:1 against comp.meter.track.color and the surface behind it (WCAG 1.4.11). In the default system each is above 4.6:1 in light and 7.3:1 in dark.
- Color is never the only sign of a status (WCAG 1.4.1): MTR-9.
- Web: the host carries role="meter" and the aria-value attributes; the native \<meter> element is not drawn, because its look cannot be styled in every engine.

### Behaviour

Requirements in EARS form, each with its stable id.

- **MTR-1** THE meter SHALL draw the indicator over the fraction (value − min) / (max − min) of the track, from the track's start: the inline-start of a bar, the top of a ring, turning clockwise.
- **MTR-2** THE meter SHALL draw a bar comp.meter.linear.thickness.medium high for medium (and so on for each size) across the full inline size its layout gives it, and a ring whose outer edge fills a comp.meter.circular.size.medium square with a stroke of comp.meter.circular.thickness.medium for medium (and so on for each size).
- **MTR-3** THE meter SHALL draw the track in comp.meter.track.color and the indicator over it in the indicator color of its status — comp.meter.indicator.color WHILE status is default, comp.meter.info.indicator.color WHILE it is info, comp.meter.success.indicator.color WHILE it is success, comp.meter.warning.indicator.color WHILE it is warning and comp.meter.error.indicator.color WHILE it is error; the ends of a bar's track and indicator SHALL be rounded by comp.meter.track.shape, clamped to half the thickness, and a ring's arcs SHALL have round caps unless comp.meter.track.shape is sys.shape.corner.none.
- **MTR-4** THE meter SHALL tell the indicator from the rest of its track as its separation names — WHILE separation is auto, as comp.meter.track.separation names; WHILE it is divider or gap, as that value names — and WHILE the separation is gap and value lies strictly between min and max SHALL leave comp.meter.track.gap of empty space, measured along the track, between the indicator and the rest of the track (on a ring, at both ends of the indicator's arc); WHILE it is divider THE meter SHALL draw the indicator on the track with nothing between them.
- **MTR-5** WHILE comp.meter.stop-indicator.size is above 0 THE meter SHALL draw at the end of a bar's track a round dot of that size, centred across the track, in the indicator color of its status; a ring SHALL draw none.
- **MTR-6** WHEN value, min, max or status changes after the first frame THE meter SHALL move the indicator's end to the new fraction over comp.meter.motion.value-duration with comp.meter.motion.value-easing, and change the indicator's color over the same duration; WHEN it changes again during that motion THE meter SHALL go on from the place and the color then shown. THE meter SHALL draw its first frame at its value and in its status's color without a motion, and WHERE reduced motion is requested SHALL move the end at once and keep the change of color as a fade over the same duration.
- **MTR-7** THE meter SHALL expose to assistive technology a meter — the platform's own meter where it has one, and otherwise an element with a value range and no busy state — named by label, with min and max as its range, the clamped value as its current value, and valueText as the value's text WHILE valueText is not empty; it SHALL NOT expose the progressbar role or a busy state, because nothing is under way.
- **MTR-8** THE meter SHALL NOT be focusable, SHALL take no input and SHALL NOT announce a change of its value or its status by itself; assistive technology SHALL read the current value when it reaches the meter.
- **MTR-9** THE meter SHALL expose nothing of status by itself: status SHALL change the indicator's color and nothing else, so that what the color means reaches every person only through the words the product gives in valueText, label or the text beside the meter.
- **MTR-10** IF value is below min or above max THE meter SHALL draw and expose it clamped to that range; IF value is not a finite number THE meter SHALL draw and expose min; IF max is not greater than min THE meter SHALL draw the track with no indicator and expose a current value of 0 in a range of 0 to 1; in each case debug builds SHALL report the values.
- **MTR-11** WHEN size names a value that the active design system does not have, or variant, separation or status a value the meter does not define, THE meter SHALL render with the default value's tokens (medium, linear, auto, default), and in debug builds report the unknown value.
- **MTR-12** WHERE the layout direction is right-to-left THE meter SHALL fill a bar from the right and draw its stop indicator at the left; a ring SHALL NOT be mirrored: it starts at the top and turns clockwise in every direction, as a clock does.
- **MTR-13** THE meter SHALL take its layout direction from where it is used and SHALL have no direction setting of its own; WHEN that direction changes while the meter is shown THE meter SHALL draw itself for the new direction at once, without a motion of its own, keeping its value.
- **MTR-14** WHILE label is empty THE meter SHALL still render, and in debug builds report that it has no accessible name.
- **MTR-15** WHERE the platform draws with a person's own forced colors THE meter SHALL draw its track as an edge sys.border.hairline wide in the platform's text color and its indicator filled in the platform's text color, whatever its status, so that the value is still read from where the indicator ends.
- **MTR-16** WHERE the platform has ARIA attributes (the web), the host carries its meter role (MTR-7) itself, so what the product writes on it is not moved, but for a name: WHILE label is not empty THE meter SHALL hold the product's aria-label and aria-labelledby on that host as their data-aria- twins, so that label is its whole name although the platform gives aria-labelledby the precedence, and WHEN label is emptied SHALL give them back as they were written; WHILE label is empty a name the product gives so — aria-label, or aria-labelledby naming an element — SHALL be its name and SHALL NOT be reported as having none in debug builds (MTR-14). WHEN the product removes one, or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaLabelledByElements) to null, THE meter SHALL take it away.

### Tokens

As written in the token documents (DTCG): an alias in braces names the token it takes its value from, which each design system resolves. On the web each token is a CSS custom property: `--tanrei` and the name after `tanrei`, joined by hyphens (`tanrei.comp.meter.…` → `--tanrei-comp-meter-…`).

#### `tanrei.comp.meter`

| Token | Type | Value |
| --- | --- | --- |
| `comp.meter.linear.thickness.small` | `dimension` | `{tanrei.comp.progress-indicator.linear.thickness.small}` |
| `comp.meter.linear.thickness.medium` | `dimension` | `{tanrei.comp.progress-indicator.linear.thickness.medium}` |
| `comp.meter.linear.thickness.large` | `dimension` | `{tanrei.comp.progress-indicator.linear.thickness.large}` |
| `comp.meter.circular.size.small` | `dimension` | `{tanrei.comp.progress-indicator.circular.size.small}` |
| `comp.meter.circular.size.medium` | `dimension` | `{tanrei.comp.progress-indicator.circular.size.medium}` |
| `comp.meter.circular.size.large` | `dimension` | `{tanrei.comp.progress-indicator.circular.size.large}` |
| `comp.meter.circular.thickness.small` | `dimension` | `{tanrei.comp.progress-indicator.circular.thickness.small}` |
| `comp.meter.circular.thickness.medium` | `dimension` | `{tanrei.comp.progress-indicator.circular.thickness.medium}` |
| `comp.meter.circular.thickness.large` | `dimension` | `{tanrei.comp.progress-indicator.circular.thickness.large}` |
| `comp.meter.track.color` | `color` | `{tanrei.comp.progress-indicator.track.color}` |
| `comp.meter.track.shape` | `dimension` | `{tanrei.comp.progress-indicator.track.shape}` |
| `comp.meter.track.separation` | `number` | `{tanrei.comp.progress-indicator.track.separation}` |
| `comp.meter.track.gap` | `dimension` | `{tanrei.comp.progress-indicator.track.gap}` |
| `comp.meter.stop-indicator.size` | `dimension` | `{tanrei.comp.progress-indicator.stop-indicator.size}` |
| `comp.meter.indicator.color` | `color` | `{tanrei.comp.progress-indicator.indicator.color}` |
| `comp.meter.info.indicator.color` | `color` | `{tanrei.sys.color.info}` |
| `comp.meter.success.indicator.color` | `color` | `{tanrei.sys.color.success}` |
| `comp.meter.warning.indicator.color` | `color` | `{tanrei.sys.color.warning}` |
| `comp.meter.error.indicator.color` | `color` | `{tanrei.sys.color.error}` |
| `comp.meter.motion.value-duration` | `duration` | `{tanrei.comp.progress-indicator.motion.value-duration}` |
| `comp.meter.motion.value-easing` | `cubicBezier` | `{tanrei.comp.progress-indicator.motion.value-easing}` |

## दिशानिर्देश

### कब इस्तेमाल करें

मीटर तब इस्तेमाल करें जब आपको दिखाना हो कि कोई मात्रा ऐसी रेंज में कहाँ है जिसका असली न्यूनतम और अधिकतम हो: कोटे में से इस्तेमाल हुआ स्टोरेज, बैटरी का चार्ज, किसी कमरे में भरी हुई सीटें, नए पासवर्ड की मज़बूती। यह एक स्तर दिखाता है; कुछ चल नहीं रहा, और कुछ ख़त्म नहीं होगा।

जो काम चल रहा है — अपलोड, इंपोर्ट, लंबा सेव — उसके लिए इसकी जगह [प्रोग्रेस इंडिकेटर](https://tanrei.chnotchy.com/hi/components/progress-indicator/) इस्तेमाल करें। वह एक जैसा दिखता है, पर सहायक तकनीक लोगों को बताती है कि कुछ चल रहा है, और मीटर को यह नहीं कहना चाहिए। जिस मान का कोई सार्थक अधिकतम नहीं, जैसे संदेशों की गिनती, वह दोनों में से कोई नहीं है: उसे टेक्स्ट के रूप में दिखाएँ।

### वेरिएंट चुनना

| वेरिएंट | किसके लिए |
| --- | --- |
| Linear | वह स्तर जो किसी पेज या सेक्शन का है: सेटिंग्स पेज पर स्टोरेज, कार्ड के भीतर कोटा, प्लान की लिस्ट में एक पंक्ति। बार उतनी चौड़ाई भरता है जितनी उसका लेआउट उसे देता है। |
| Circular | तंग जगहें और टेक्स्ट के बग़ल का स्तर: स्टेटस बार में बैटरी, डिवाइसों की लिस्ट में एक पंक्ति। रिंग का साइज़ तय होता है। |

### साइज़ चुनना

| साइज़ | डिफ़ॉल्ट सिस्टम में बार की मोटाई / रिंग का साइज़ | किसके लिए |
| --- | --- | --- |
| Small | 2 / 16 | घनी पंक्तियाँ, छोटे टेक्स्ट के बग़ल में। |
| Medium | 4 / 24 | ज़्यादातर जगहें। यही डिफ़ॉल्ट है। |
| Large | 8 / 40 | वह एक स्तर जिसके बारे में पूरा व्यू है, जैसे किसी अकाउंट का स्टोरेज पेज। |

साइज़, ट्रैक और डिफ़ॉल्ट रंग प्रोग्रेस इंडिकेटर के ही हैं, इसलिए मीटर और प्रोग्रेस इंडिकेटर अगल-बग़ल मेल खाते हैं। डिज़ाइन सिस्टम मीटर के अपने टोकन से मीटर को अलग कर सकता है।

### स्थिति चुनना

मीटर यह तय नहीं करता कि किसी मान का क्या मतलब है। ज़्यादा अच्छा है या बुरा, यह आपका प्रोडक्ट जानता है: लगभग भरा स्टोरेज warning है, लगभग पूरी मज़बूती वाला पासवर्ड success है। स्थिति ख़ुद निकालें और पास करें। स्थितियों के नाम वही हैं जो टैग और स्नैकबार इस्तेमाल करते हैं।

| स्थिति | किसके लिए |
| --- | --- |
| Default | वह स्तर जिस पर कुछ कहने की ज़रूरत नहीं। ज़्यादातर मीटर यहीं रहते हैं। |
| Info | जानने लायक़ स्तर जो कुछ नहीं माँगता, जैसे जल्द ही रीसेट होने वाला कोटा। |
| Success | वह स्तर जो वहीं है जहाँ उसे होना चाहिए, जैसे मज़बूत पासवर्ड। |
| Warning | वह स्तर जिस पर जल्द ही ध्यान देना होगा, जैसे लगभग भरा स्टोरेज या कम बैटरी। |
| Error | वह स्तर जो पहले से कुछ रोक रहा है, जैसे भरा हुआ स्टोरेज। |

स्थिति इंडिकेटर का रंग बदलती है, और कुछ नहीं। उसका मतलब शब्दों में भी कहें: मान टेक्स्ट में, और मीटर के बग़ल के टेक्स्ट में।

### करें

- उसे ऐसा लेबल दें जो बताए कि क्या नापा जा रहा है: “इस्तेमाल हुआ स्टोरेज”, न कि “मीटर”। अगर उसके बग़ल में कोई कैप्शन दिखता है, तो वही शब्द इस्तेमाल करें।
- जब प्रतिशत में बताना स्वाभाविक न हो, तो मान टेक्स्ट इस्तेमाल करें: “15 GB में से 9.3 GB”, “50 में से 37 सीटें”, “मज़बूत”।
- जब स्थिति का कोई मतलब हो, तो उसे मान टेक्स्ट में भी डालें: “लगभग भरा हुआ: 15 GB में से 12.8 GB”।

### न करें

- इसे चल रहे काम के लिए इस्तेमाल न करें। वह प्रोग्रेस इंडिकेटर है।
- सिर्फ़ स्थिति के रंग पर भरोसा न करें। जो रंग नहीं देख सकता, उसे भी पता चलना चाहिए कि स्टोरेज लगभग भर गया है।
- रेंज से बाहर का मान न दिखाएँ। मीटर उसे रेंज के भीतर सीमित करके बनाता और देता है, इसलिए व्यक्ति जो संख्या सुनेगा, वह आपकी संख्या नहीं होगी।

## सुलभता

### कंपोनेंट क्या सँभालता है

- यह मीटर का रोल देता है, जिसका नाम लेबल है, साथ में रेंज, मौजूदा मान (रेंज के भीतर सीमित किया हुआ) और मान टेक्स्ट, अगर हो। यह कभी नहीं कहता कि यह व्यस्त है या कोई काम चल रहा है।
- इस पर कभी फ़ोकस नहीं जा सकता, और यह अपने बदलाव पढ़कर नहीं सुनाता। जब व्यक्ति इस तक पहुँचता है, तो सहायक तकनीक मौजूदा मान पढ़ती है।
- स्थिति अपने आप कभी नहीं सुनाई जाती: वह सिर्फ़ रंग बदलती है।
- मान बदलने पर इंडिकेटर का सिरा खिसकता है और स्थिति बदलने पर उसका रंग धीरे-धीरे बदलता है। जब मोशन कम करने का अनुरोध हो, तो सिरा तुरंत खिसकता है और सिर्फ़ रंग धीरे-धीरे बदलता है।
- फ़ोर्स्ड कलर्स में, स्थिति चाहे जो हो, ट्रैक एक पतला किनारा बन जाता है और इंडिकेटर भरा जाता है, दोनों टेक्स्ट के रंग में, ताकि मान अब भी वहीं से पढ़ा जा सके जहाँ इंडिकेटर ख़त्म होता है।
- ख़ाली लेबल, रेंज से बाहर का मान, ऐसा मान जो संख्या नहीं है, और अनजान `size`, `variant`, `separation` या `status` डीबग बिल्ड में रिपोर्ट किए जाते हैं।

### आपको क्या करना है

- स्थिति का मतलब शब्दों में कहें: मान टेक्स्ट में, और मीटर के बग़ल के टेक्स्ट में।
- कोई ज़रूरी बदलाव, जैसे स्टोरेज का भर जाना, ख़ुद बताएँ: लाइव रीजन में एक संदेश, या ऐसी सूचना जो व्यक्ति देखेगा। मीटर यह नहीं कहेगा।
- अगर आप रंग बदलते हैं, तो इंडिकेटर के हर रंग — डिफ़ॉल्ट और चारों स्थितियाँ — को ट्रैक और उसके पीछे की सरफ़ेस के मुक़ाबले कम से कम 3:1 पर रखें। मान वहीं से पढ़ा जाता है जहाँ इंडिकेटर ट्रैक से मिलता है। डिफ़ॉल्ट सिस्टम पाँचों को लाइट में 4.6:1 से ऊपर और डार्क में 7.3:1 से ऊपर रखता है।