# `PhiaUi.Components.MeterGroup`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/meter_group.ex#L1)

Meter group — a labeled collection of progress meters.

Inspired by PrimeReact `MeterGroup`. Shows multiple metrics, each with its own
label, value, max, and color. Useful for storage usage, resource allocation,
budget tracking, and multi-category comparisons.

## Examples

    <.meter_group meters={[
      %{label: "Photos", value: 30, max: 100, color: :blue},
      %{label: "Videos", value: 45, max: 100, color: :purple},
      %{label: "Files",  value: 15, max: 100, color: :green}
    ]} />

    <.meter_group meters={@disk_usage} size={:lg} total_label="Total used: 90 GB" />

# `meter_group`

## Attributes

* `meters` (`:list`) (required) - List of meter maps: `%{label: string, value: number, max: number, color: atom}`.
* `total_label` (`:string`) - Optional summary label shown below all meters. Defaults to `nil`.
* `size` (`:atom`) - Controls bar height. Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `class` (`:string`) - Additional CSS classes for the root element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root `<div>`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*