# Meter

A visual representation of a value within a known range.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "coss-svelte";
</script>

<Meter value={75}>
	<div class="flex items-center justify-between gap-2">
		<MeterLabel>Storage usage</MeterLabel>
		<MeterValue />
	</div>
	<MeterTrack><MeterIndicator /></MeterTrack>
</Meter>

```

## Anatomy

- `Meter`
- `MeterIndicator`
- `MeterLabel`
- `MeterTrack`
- `MeterValue`

## API Reference

### Meter

A visual representation of a value within a known range.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | `70` | Current value for the component. Bind with `bind:value` when supported. |
| `min` | `number` | `0` | Minimum value for the control. |
| `max` | `number` | `100` | Maximum value for the control. |
| `label` | `string` | `""` | Accessible label or fallback visible label for the control. |
| `style` | `any` | `""` | Inline style forwarded to the rendered element. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Meter.Root](https://bits-ui.com/docs/components/meter#root).

### MeterIndicator

Renders the visual indicator for the current value or state.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <span> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### MeterLabel

Labels the parent component or a grouped section.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <span> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### MeterTrack

Renders the track that contains the current value indicator.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <span> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### MeterValue

Renders the current value for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <span> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | bits |
| Category | Feedback & Status |
| Particles | 4 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/meter.json` for the complete local file and dependency closure.
- Meter is stable in the current source catalog.