Skip to contents

Meter

A graphical display of a numeric value within a range.

View as MarkdownView source
Storage Used
x
import { Meter } from 'base-ui-solid/meter';
import styles from './index.module.css';

export default function ExampleMeter() {
  return (
    <Meter.Root class={styles.Meter} value={24}>
      <Meter.Label class={styles.Label}>Storage Used</Meter.Label>
      <Meter.Value class={styles.Value} />
      <Meter.Track class={styles.Track}>
        <Meter.Indicator class={styles.Indicator} />
      </Meter.Track>
    </Meter.Root>
  );
}

Anatomy

Import the component and assemble its parts:

Anatomy
import { Meter } from 'base-ui-solid/meter';

<Meter.Root>
  <Meter.Label />
  <Meter.Track>
    <Meter.Indicator />
  </Meter.Track>
  <Meter.Value />
</Meter.Root>;

API reference

Root

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

Prop
Type
Default
value*number—
The current value.number
aria-valuetextstring—
A string value that provides a user-friendly name for aria-valuenow, the current value of the meter.string
getAriaValueTextfunction—
A function that returns a string value that provides a human-readable text alternative for aria-valuenow, the current value of the meter.((formattedValue: string, value: number) => string)
localeIntl.LocalesArgument—
The locale used by Intl.NumberFormat when formatting the value. Defaults to the user’s runtime locale.Intl.LocalesArgument
minnumber0
The minimum valuenumber
maxnumber100
The maximum valuenumber
formatIntl.NumberFormatOptions—
Options to format the value.Intl.NumberFormatOptions
classfunction—
CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)
stylefunction—
Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)
renderfunction—
Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)
Root.State
type MeterRootState = {};

Track

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

Prop
Type
Default
classfunction—
CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)
stylefunction—
Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)
renderfunction—
Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)
Track.State
type MeterTrackState = {};

Indicator

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

Prop
Type
Default
classfunction—
CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)
stylefunction—
Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)
renderfunction—
Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)
Indicator.State
type MeterIndicatorState = {};

Value

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

Prop
Type
Default
childrenfunction—
-((formattedValue: string, value: number) => JSX.Element) | null
classfunction—
CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)
stylefunction—
Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)
renderfunction—
Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)
Value.State
type MeterValueState = {};

Label

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

Prop
Type
Default
classfunction—
CSS class applied to the element, or a function that returns a class based on the component’s state.JSX.ClassValue | ((state) => JSX.ClassValue)
stylefunction—
Style applied to the element, or a function that returns a style object based on the component’s state.JSX.CSSProperties | string | ((state) => JSX.CSSProperties | string | undefined)
renderfunction—
Replace the default element with a tag name, component, or render function.keyof JSX.IntrinsicElements | Component | ((props, state) => JSX.Element)
Label.State
type MeterLabelState = {};