Feedback
Meter
A gauge for an amount within a fixed range, such as usage or a score. It serves a different purpose from Progress, which tracks how far a task has run.
ReactVueWeb Components
View in Storybook Playground
Examples
<Meter label="ストレージ" value={75} valueText="100GB中75GB" status="warning" showValue />Props
| Name | Type | Default | Description |
|---|---|---|---|
value required | number | — | Current value. |
min | number | 0 | Range floor. @default 0 |
max | number | 100 | Range ceiling. @default 100 |
label | ReactNode | — | Visible label. |
status | MeterStatus | primary | Bar color. @default 'primary' |
valueText | string | — | Human-readable value text for AT (e.g. "75 GB of 100 GB"). |
showValue | boolean | false | Show the numeric value on the right of the header. @default false |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.