Meter bar

The <meter> element — or <Meter> react component — must only be used for a visual rendering of a graduated and limited value, not for a progression. For a progression value, see progress bars in Loading content.

2 of 10 emails
You shall not fill! 🧙

6 of 10 emails
You shall not fill! 🧙

9 of 10 emails
You shall not fill! 🧙

11 of 10 emails
You shall not fill! 🧙
<span id="desc1">2 of 10 emails</span><br>
<meter min="0" max="10" low="5" high="8" optimum="0" value="2" class="meterbar w100" aria-describedby="desc1"></meter>

<br><br>

<span id="desc2">6 of 10 emails</span><br>
<meter min="0" max="10" low="5" high="8" optimum="0" value="6" class="meterbar w100" aria-describedby="desc2"></meter>

<br><br>

<span id="desc3">9 of 10 emails</span><br>
<meter min="0" max="10" low="5" high="8" optimum="0" value="9" class="meterbar w100" aria-describedby="desc3"></meter>

<br><br>

<span id="desc4">11 of 10 emails</span><br>
<meter min="0" max="10" low="5" high="8" optimum="0" value="11" class="meterbar w100" aria-describedby="desc4"></meter>

Set properties values as following:

  • min to the minimum value of your data, lower than max
  • max to the maximum value of your data, higher than min
  • low to a value of your data that can be understood as low, within the range of min and max
  • high to a value of your data that can be understood as high, within the range of min and max
  • optimum to the optimal value of your data, within the range of min and max. This will influent the behaviour of low and high: it gives an indication where along the range is considered preferable. For example, if it is between the min attribute and the low attribute, then the lower range is considered preferred.

Further explanations:

  • If the optimum value is lower than low value, it indicates that the lower values are optimum, so lower values will be green, between low and high will be yellow, and red higher than high
  • If the optimum value is higher than high value, it indicates that the higher values are optimum, so lower values will be red, between low and high will be yellow, and green higher than high
  • If the optimum value is between low and high values, it indicates that extremes values aren't the best, so they will be yellow, and values between low and high will be green

For simplicity, we have set default parameters of the <Meter> react component as if you would use a percentage, so they are min="0" max="100" low="50" high="80" optimum="0". With those default values, since optimum value is lower than low value, you will have:

  • Green between 0 and 50
  • Yellow between 50 and 80
  • Red above 80, including higher than 100

Finally, for a better screen reader rendering, please do not fill numeric values inside <meter> tag. Link it to its description id via aria-describedby instead.