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

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

Config

{
  "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"
  }
}

{
  "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.