---
title: "Meter"
description: "Shows a level within a range rather than progress: stock, temperature or resource load. The tone describes the state of that level."
kind: component
id: C-021
registry: "meter"
docs: "https://koten.codehive.com.co/components/meter"
markdown: "https://koten.codehive.com.co/md/components/meter.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/meter.json"
language: en
---

# Meter · 計量

> Component C-021 in the Koten UI catalog.

Shows a level within a range rather than progress: stock, temperature or resource load. The tone describes the state of that level.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/meter.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/meter.json
```

## Files

- `@/components/ui/meter.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Reference

- Upstream primitive: https://base-ui.com/react/components/meter

## Examples

### Levels and ranges

max sets the real range; the tone turns the number into a readable state.

```tsx
<Meter label="HIKARI K-1 stock" value={52} max={60} tone="success" />
<Meter label="KURA-014 stock" value={18} max={60} tone="warning" />
<Meter label="KURA-022 stock" value={4} max={60} tone="danger" />
```

### Without the value label

showValue={false} cleans the row when the number already appears in another cell; the value stays available to assistive technology.

```tsx
<Meter label="Warehouse load" value={72} tone="neutral" showValue={false} />
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `label` | `ReactNode` | `requerido` | What is measured; it must name the resource, not only the value. |
| `value` | `number` | `requerido` | Current level within the range; Meter does not accept null because it is not an ongoing task. |
| `max` | `number` | `100` | Top of the range; a real value keeps the level from reading as a percentage. |
| `tone` | `success \| warning \| danger \| neutral` | `success` | State of the level; neutral is for data without a judgement. |
| `showValue` | `boolean` | `true` | Hides the visible number without removing aria-valuenow. |
| `className` | `string` | `—` | Adjusts the block width; the track keeps its 2 px height. |

## Accessibility

- Base UI uses role meter with value, minimum and maximum; the label describes the measured resource.
- The tone accompanies the number, it does not replace it: success, warning and danger are reinforcement.
- A real max keeps the level from being announced as a percentage that does not exist.
- showValue={false} hides the visible number but keeps the value exposed to assistive technology.

## Sources

- Catalog page: https://koten.codehive.com.co/components/meter
- Markdown: https://koten.codehive.com.co/md/components/meter.md
- Repository: https://github.com/codehive-colombia/koten