elements

Meter

GitHub

Display a gauge meter that fills or depletes.

Usage

Use the value prop from 0 to 100 to set a value for the meter bar.

<UMeter :value="25" />
Check out the Range component for inputs

Min & Max

By default, min is 0 and max is 100. You can change either of these using their respective props, even for negative numbers.

<UMeter :value="-25" :min="-50" :max="50" />

Indicator

You may show a percentage indicator on top of the meter using the indicator prop.

35% 
<UMeter :value="35" indicator />

Label

Add a label below the meter using the label prop.

Disk usage
<UMeter label="Disk usage" :value="86" />

Icon

You may also add an icon to the start label using the icon prop.

Disk usage
<UMeter icon="i-heroicons-server" :value="86" label="Disk usage" />

Size

Change the size of the meter bar using the size prop.

75%
CPU Load
<UMeter size="md" indicator label="CPU Load" :value="75.4" />

Style

The color prop changes the visual style of the meter bar. The color can be any color from the ui.colors object.

80%
Memory usage
<UMeter color="primary" :value="80" indicator label="Memory usage" />

Group

To group multiple meters into a group, adding all values, use the MeterGroup component.

  • To change the overall minimum and maximum value, pass the min and max props respectively.
  • To change size of all meters, use the size prop.
  • To show an indicator for the overall amount, set the indicator prop or slot.
  • To change the color of each meter, use the color prop.
  • To show a label for each meter, use the label prop on each meter.
  • To change the icon for each meter, use the icon prop.
67%
  1. System (19%)
  2. Apps (6%)
  3. Documents (9%)
  4. Multimedia (33%)
<UMeterGroup :min="0" :max="128" size="md" indicator icon="i-heroicons-minus">  <UMeter :value="24" color="gray" label="System" />  <UMeter :value="8" color="red" label="Apps" />  <UMeter :value="12" color="yellow" label="Documents" />  <UMeter :value="42" color="green" label="Multimedia" />  <!-- Total: 86 --></UMeterGroup>
When the Meters are grouped, their individual indicators and label slots are stripped away.

A Meter group can also be used with an indicator slot, and even individual meter icons.

86GB used

42GB remaining

  1. System (19%)
  2. Apps (6%)
  3. Documents (9%)
  4. Multimedia (33%)
<template>  <UMeterGroup :max="128">    <template #indicator>      <div class="flex gap-1.5 justify-between text-sm">        <p>86GB used</p>        <p class="text-gray-500 dark:text-gray-400">          42GB remaining        </p>      </div>    </template>    <UMeter :value="24" color="gray" label="System" icon="i-heroicons-cog-6-tooth" />    <UMeter :value="8" color="red" label="Apps" icon="i-heroicons-window" />    <UMeter :value="12" color="yellow" label="Documents" icon="i-heroicons-document" />    <UMeter :value="42" color="green" label="Multimedia" icon="i-heroicons-film" />  </UMeterGroup></template>

Slots

indicator

Use the #indicator slot to change the indicator shown at the top of the bar. It receives the current meter percent.

84.2GB used (35%) 
<script setup>const used = ref(84.2)const total = 238.42</script><template>  <UMeter :value="used" :max="total">    <template #indicator="{ percent }">      <div class="text-sm text-right">        {{ used }}GB used ({{ Math.round(percent) }}%)      </div>    </template>  </UMeter></template>

label

The label slot can be used to change how the label below the meter bar is shown. It receives the current meter percent.

You are using 84GB (65%) of space 

<script setup>const used = ref(84.2)const total = 238.42</script><template>  <UMeter :value="used" :max="total">    <template #label="{ percent }">      <p class="text-sm">        You are using {{ Math.round(used) }}GB ({{ Math.round(100 - percent) }}%) of space      </p>    </template>  </UMeter></template>

Props

value
number
0
size
"sm" | "2xs" | "xs" | "md" | "lg" | "xl" | "2xl"
config.default.size
ui
any
undefined
icon
string
null
label
string
null
color
any
config.default.color
min
number
0
max
number
100
indicator
boolean
false
MeterGroup
min
number
0
max
number
100
size
"md" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl"
meterConfig.default.size
icon
string
"i-heroicons-minus"
ui
any
undefined
indicator
boolean
false

Config

UMeter.vue
{  "wrapper": "w-full flex flex-col gap-2",  "indicator": {    "container": "min-w-fit transition-all",    "text": "text-gray-400 dark:text-gray-500 text-end",    "size": {      "2xs": "text-xs",      "xs": "text-xs",      "sm": "text-sm",      "md": "text-sm",      "lg": "text-sm",      "xl": "text-base",      "2xl": "text-base"    }  },  "meter": {    "base": "appearance-none block w-full bg-none overflow-y-hidden",    "background": "bg-gray-200 dark:bg-gray-700",    "color": "text-{color}-500 dark:text-{color}-400",    "ring": "",    "rounded": "rounded-full",    "shadow": "",    "size": {      "2xs": "h-px",      "xs": "h-0.5",      "sm": "h-1",      "md": "h-2",      "lg": "h-3",      "xl": "h-4",      "2xl": "h-5"    },    "appearance": {      "inner": "[&::-webkit-meter-inner-element]:block [&::-webkit-meter-inner-element]:relative [&::-webkit-meter-inner-element]:border-none [&::-webkit-meter-inner-element]:bg-none [&::-webkit-meter-inner-element]:bg-transparent",      "meter": "[&::-webkit-meter-bar]:border-none [&::-webkit-meter-bar]:bg-none [&::-webkit-meter-bar]:bg-transparent",      "bar": "[&::-webkit-meter-optimum-value]:border-none [&::-webkit-meter-optimum-value]:bg-none [&::-webkit-meter-optimum-value]:bg-current",      "value": "[&::-moz-meter-bar]:border-none [&::-moz-meter-bar]:bg-none [&::-moz-meter-bar]:bg-current"    },    "bar": {      "transition": "[&::-webkit-meter-optimum-value]:transition-all [&::-moz-meter-bar]:transition-all",      "ring": "",      "rounded": "[&::-webkit-meter-optimum-value]:rounded-full [&::-moz-meter-bar]:rounded-full",      "size": {        "2xs": "[&::-webkit-meter-optimum-value]:h-px [&::-moz-meter-bar]:h-px",        "xs": "[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5",        "sm": "[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1",        "md": "[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2",        "lg": "[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3",        "xl": "[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4",        "2xl": "[&::-webkit-meter-optimum-value]:h-5 [&::-moz-meter-bar]:h-5"      }    }  },  "label": {    "base": "flex gap-2 items-center",    "text": "truncate",    "color": "text-{color}-500 dark:text-{color}-400",    "size": {      "2xs": "text-xs",      "xs": "text-xs",      "sm": "text-sm",      "md": "text-sm",      "lg": "text-sm",      "xl": "text-base",      "2xl": "text-base"    }  },  "color": {    "white": "text-white dark:text-black",    "black": "text-black dark:text-white",    "gray": "text-gray-500 dark:text-gray-400"  },  "default": {    "size": "md",    "color": "primary"  }}
UMeterGroup.vue
{  "wrapper": "flex flex-col gap-2 w-full",  "base": "flex flex-row flex-nowrap flex-shrink overflow-hidden",  "background": "bg-gray-200 dark:bg-gray-700",  "transition": "transition-all",  "rounded": "rounded-full",  "shadow": "",  "default": {    "size": "md"  }}

Progress

Show a horizontal bar to indicate task progression.

Input

Display an input field.