Meter

A reading inside a known range, like storage or quota, with its label and value on one line over the track.

01Preview

Messages this week

File storage

Context used

npx shadcn@latest add https://aiellie.app/r/meter.json

Groups all parts of the meter and provides the value for screen readers. Renders a <div> element.

Prop	Type	Default	Description
value\*	number	-	The current value.
aria-valuetext	string	-	A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
getAriaValueText	((formattedValue: string, value: number) => string)	-	A function that returns a string value that provides a human-readable text alternative for `aria-valuenow`, the current value of the meter.
locale	Intl.LocalesArgument	-	The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale.
min	number	0	The minimum value
max	number	100	The maximum value
format	Intl.NumberFormatOptions	-	Options to format the value.
className	string \| ((state: Meter.Root.State) => string \| undefined)	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	React.CSSProperties \| ((state: Meter.Root.State) => React.CSSProperties \| undefined)	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	ReactElement \| ((props: HTMLProps, state: Meter.Root.State) => ReactElement)	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.