MeterGroup

Show how several values share a reference capacity.

Category: Feedback and status
Import: @neural-ui/core/meter-group
Selector: neu-meter-group

import { NeuMeterGroupComponent } from '@neural-ui/core/meter-group';

Usage

Each NeuMeterItem provides label, value and an optional CSS color. A positive total defines capacity; total 0 uses the sum of items. With a larger total, the uncovered track represents remaining capacity. Negative and non-finite values count as 0; excess values are capped in item order. showLegend adds names and percentages. This is a distribution meter, not an operation progress tracker.

Examples

Try the interaction and open Code for the implementation. Reset restores the initial state.

Storage allocation

Documents35%
Photos25%
Other10%

70 GB used · 30 GB available

Try and configure

Change the options and inspect the preview and generated template. Code contains the full executable source.

Live preview

Documents35%
Photos25%

Rounded

Show legend

Accessible label

Generated template: reflects the options above. Open Code for the complete imports and state.

<neu-meter-group
  [items]="items"
  [total]="100"
  [height]="12"
  [rounded]="true"
  [showLegend]="true"
  ariaLabel="Storage allocation"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

export const items = [
  {
    "label": "Documents",
    "value": 35
  },
  {
    "label": "Photos",
    "value": 25
  }
];

import type { NeuMeterItem } from '@neural-ui/core/meter-group';

const items: NeuMeterItem[] = [
  {
    "label": "Documents",
    "value": 35
  },
  {
    "label": "Photos",
    "value": 25
  }
];

Data and content

The application supplies items and total. MeterGroup derives the rendered distribution and does not modify the supplied array. There are no Outputs or templates.

Accessibility and keyboard

Give the meter a descriptive ariaLabel and keep the legend visible to explain every segment without relying on color. The meter exposes the normalized total and used value. Include the units and remaining capacity in adjacent text. There is no keyboard interaction.

Key	Action
`—`	Give the meter a descriptive ariaLabel and keep the legend visible to explain every segment without relying on color. The meter exposes the normalized total and used value. Include the units and remaining capacity in adjacent text. There is no keyboard interaction.

API

Inputs and Outputs are extracted from the pinned package. Named types link to their definitions; Templates list only supported projection areas.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`ariaLabel`	`string`	`'Meter'`	`[ariaLabel]`	Accessible name for the meter and legend.
`height`	`number`	`12`	`[height]`	Track height in pixels.
`items`	`NeuMeterItem[]`	`[]`	`[items]`	Segment label, numeric value and optional CSS color.
`rounded`	`boolean`	`true`	`[rounded]`	Fully rounded track corners.
`showLegend`	`boolean`	`true`	`[showLegend]`	Show segment names and normalized percentages.
`total`	`number`	`0`	`[total]`	Positive reference capacity; 0 uses the sum of valid item values.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Public Types

Open a type to inspect its definition and interface fields.

NeuMeterItemTypeScript

import type { NeuMeterItem } from '@neural-ui/core/meter-group';

// Public declaration (reference only)
export interface NeuMeterItem {
  color?: string;
  label: string;
  value: number;
}

Styles and tokens

Use the public component Inputs and Core surface, text, spacing and semantic color tokens. Keep content responsive and verify both themes.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-error`	Invalid field or danger-action color	Shared by other Core consumers; scope the override.	`#dc2626`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-text-muted`	Secondary labels and supporting content	Shared by other Core consumers; scope the override.	`#475569`
`--neu-meter-track`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`var(--neu-meter-track-bg)`
`--neu-radius-full`	Corner radius	Shared by other Core consumers; scope the override.	`9999px`
`--neu-secondary`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`#10b981`
`--neu-success`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`#15803d`