--- title: Meter subtitle: A graphical display of a numeric value within a range. description: A high-quality, unstyled React meter component that provides a graphical display of a numeric value. --- > FineSoft Components documentation. Independent Stencil port; not the official Base UI website. > > React API text and `@base-ui/react` examples are upstream references. FineSoft Stencil examples use `finesoft-components`. Do not treat the two packages as interchangeable. # Meter A high-quality, unstyled React meter component that provides a graphical display of a numeric value. ## Demo ### Tailwind This example shows how to implement the component using Tailwind CSS. ```tsx /* docs-comparison.tsx */ import { StencilComparison } from 'docs/src/components/StencilComparison'; import ReactMeter from './react-meter'; import StencilMeter from './stencil-meter'; export default function MeterComparison() { return } stencil={} />; } ``` ```tsx /* react-meter.tsx */ import { Meter } from '@base-ui/react/meter'; export default function ExampleMeter() { return ( Storage Used ); } ``` ```tsx /* stencil-meter.tsx */ export default function StencilMeter() { return ( Storage Used ); } ``` ### CSS Modules This example shows how to implement the component using CSS Modules. ```css /* index.module.css */ .Meter { display: grid; grid-template-columns: 1fr 1fr; row-gap: 0.5rem; width: 15rem; max-width: 100%; } .Label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; color: oklch(14.5% 0 0deg); @media (prefers-color-scheme: dark) { color: white; } } .Value { font-size: 0.875rem; line-height: 1.25rem; color: oklch(14.5% 0 0deg); text-align: right; @media (prefers-color-scheme: dark) { color: white; } } .Track { grid-column: 1 / 3; overflow: hidden; height: 0.75rem; background-color: oklch(92.2% 0 0deg); @media (prefers-color-scheme: dark) { background-color: oklch(26.9% 0 0deg); } } .Indicator { background-color: oklch(14.5% 0 0deg); transition: width 500ms; @media (prefers-color-scheme: dark) { background-color: white; } } ``` ```tsx /* docs-comparison.tsx */ import { StencilComparison } from 'docs/src/components/StencilComparison'; import ReactMeter from './react-meter'; import StencilMeter from './stencil-meter'; export default function MeterComparison() { return } stencil={} />; } ``` ```tsx /* react-meter.tsx */ import { Meter } from '@base-ui/react/meter'; import styles from './index.module.css'; export default function ExampleMeter() { return ( Storage Used ); } ``` ```tsx /* stencil-meter.tsx */ export default function StencilMeter() { return ( Storage Used ); } ``` The Stencil example uses the built-in Base UI theme; no CSS import is required. Set `data-fs-theme="base-ui"` on an ancestor to apply it without component classes. Label and Value expose `::part(label)` and `::part(value)` for custom text styling; CSS variables control the theme's colors, typography, size, and spacing. Root keeps the meter role and layout on its public host, with its assistive text inside Shadow DOM. Track and Indicator keep their layout hosts so percentage widths, inherited track height, and width transitions continue to work. Consumer slot content remains public. ## Anatomy Import the component and assemble its parts: ```jsx title="Anatomy" import { Meter } from '@base-ui/react/meter'; ; ``` ## API reference ### Root Groups all parts of the meter and provides the value for screen readers. Renders a `
` 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. | ### Root.Props Re-export of [Root](/react/components/meter.md) props. ### Root.State ```typescript type MeterRootState = {}; ``` ### Value A text element displaying the current value. Renders a `` 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. | ### Value.Props Re-export of [Value](/react/components/meter.md) props. ### Value.State ```typescript type MeterValueState = {}; ``` ### Indicator Visualizes the position of the value along the range. Renders a `
` 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. | ### Indicator.Props Re-export of [Indicator](/react/components/meter.md) props. ### Indicator.State ```typescript type MeterIndicatorState = {}; ``` ### Track Contains the meter indicator and represents the entire range of the meter. Renders a `
` 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. | ### Track.Props Re-export of [Track](/react/components/meter.md) props. ### Track.State ```typescript type MeterTrackState = {}; ``` ### Label An accessible label for the meter. Renders a `` 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. | ### Label.Props Re-export of [Label](/react/components/meter.md) props. ### Label.State ```typescript type MeterLabelState = {}; ``` ## Export Groups - `Meter.Root`: `Meter.Root`, `Meter.Root.State`, `Meter.Root.Props` - `Meter.Track`: `Meter.Track`, `Meter.Track.State`, `Meter.Track.Props` - `Meter.Indicator`: `Meter.Indicator`, `Meter.Indicator.State`, `Meter.Indicator.Props` - `Meter.Value`: `Meter.Value`, `Meter.Value.State`, `Meter.Value.Props` - `Meter.Label`: `Meter.Label`, `Meter.Label.State`, `Meter.Label.Props` - `Default`: `MeterRootState`, `MeterRootProps`, `MeterIndicatorState`, `MeterIndicatorProps`, `MeterLabelState`, `MeterLabelProps`, `MeterTrackState`, `MeterTrackProps`, `MeterValueState`, `MeterValueProps` ## Canonical Types Maps `Canonical`: `Alias` — Use Canonical when its namespace is already imported; otherwise use Alias. - `Meter.Root.State`: `MeterRootState` - `Meter.Root.Props`: `MeterRootProps` - `Meter.Track.State`: `MeterTrackState` - `Meter.Track.Props`: `MeterTrackProps` - `Meter.Indicator.State`: `MeterIndicatorState` - `Meter.Indicator.Props`: `MeterIndicatorProps` - `Meter.Value.State`: `MeterValueState` - `Meter.Value.Props`: `MeterValueProps` - `Meter.Label.State`: `MeterLabelState` - `Meter.Label.Props`: `MeterLabelProps`