Components

Meter

A measured value within a known range

Import

import { Meter } from "@nyte-ai/ui/meter";

Meter displays a measurement such as storage use or a quota. Its label, value, and 4px track have default styling, and the indicator uses the primary blue intent.

Usage

Pass the current value to Meter.Root. The range defaults to 0 through 100.
Nest Meter.Label and Meter.Value inside the root, then put Meter.Indicator inside Meter.Track. The indicator calculates its width from the value and range.
Without format, Meter.Value displays the percentage of the range. Pass Intl.NumberFormatOptions to format on the root to display the measurement instead.
Set locale on the root when the number needs a specific locale. Otherwise it uses the runtime locale.

Anatomy

<Meter.Root value={64}>
  <Meter.Label />
  <Meter.Value />
  <Meter.Track>
    <Meter.Indicator />
  </Meter.Track>
</Meter.Root>

Examples

A percentage

<Meter.Root value={64}>
  <Meter.Label>Storage used</Meter.Label>
  <Meter.Value />
  <Meter.Track>
    <Meter.Indicator />
  </Meter.Track>
</Meter.Root>

A measurement with units

<Meter.Root
  value={180}
  min={0}
  max={500}
  locale="en-US"
  format={{ maximumFractionDigits: 0 }}
  getAriaValueText={(formattedValue) => `${formattedValue} of 500 GB used`}
>
  <Meter.Label>Storage used</Meter.Label>
  <Meter.Value>{(formattedValue) => `${formattedValue} GB`}</Meter.Value>
  <Meter.Track>
    <Meter.Indicator />
  </Meter.Track>
</Meter.Root>

Props

All five parts add xstyle and preserve Base UI's className and style callbacks. In the table, State is the state of the corresponding Base UI part.

Prop	Type	Description
`xstyle`	`XStyle`	Adds StyleX styles to the part.
`className`	`string \| ((state: State) => string \| undefined)`	Adds a class to the part.
`style`	`React.CSSProperties \| ((state: State) => React.CSSProperties \| undefined)`	Adds inline styles to the part.

See Theming.

The reference tables below come from Base UI, MIT, © Material-UI SAS.

Root

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

Root Props:

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.

Label

An accessible label for the meter. Renders a <span> element.

Label Props:

Prop	Type	Default	Description
className	`string \| ((state: Meter.Label.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.Label.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.Label.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.

Value

A text element displaying the current value. Renders a <span> element.

Value Props:

Prop	Type	Default	Description
children	`((formattedValue: string, value: number) => React.ReactNode) \| null`	-	-
className	`string \| ((state: Meter.Value.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.Value.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.Value.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.

Track

Contains the meter indicator and represents the entire range of the meter. Renders a <div> element.

Track Props:

Prop	Type	Default	Description
className	`string \| ((state: Meter.Track.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.Track.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.Track.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.

Indicator

Visualizes the position of the value along the range. Renders a <div> element.

Indicator Props:

Prop	Type	Default	Description
className	`string \| ((state: Meter.Indicator.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.Indicator.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.Indicator.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.

Accessibility

Meter.Root has role="meter" with aria-valuemin, aria-valuemax, and aria-valuenow. Meter.Label names it through aria-labelledby. Without a visible label, set aria-label on the root.
The root supplies formatted aria-valuetext. Set getAriaValueText or aria-valuetext on the root when the announcement needs units or context. Meter.Value is aria-hidden.
The meter is read-only. It adds no tab stop or keyboard controls and does not move focus.
Indicator transitions stop under reduced motion.