Meter · base-ui-svelte

Storage used 24

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Meter.Root

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

Props

value number —

Name: value
Description: Controlled value.
Type: number

min number 0

Name: min
Description: The minimum value
Type: number
Default: 0

max number 100

Name: max
Description: The maximum value
Type: number
Default: 100

format Intl.NumberFormatOptions —

Name: format
Description: Options to format the value.
Type: Intl.NumberFormatOptions | undefined

getAriaValueText function —

Name: getAriaValueText
Description: A function that returns a string value that provides a human-readable text alternative for aria-valuenow, the current value of the meter.
Type: ((formattedValue: string, value: number) => string | undefined) | undefined

locale Intl.LocalesArgument —

Name: locale
Description: The locale used by Intl.NumberFormat when formatting the value. Defaults to the user's runtime locale.
Type: Intl.LocalesArgument | undefined

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-complete`	Present on the element when applicable.
`data-progressing`	Present on the element when applicable.

Meter.Indicator

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

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-complete`	Present on the element when applicable.
`data-progressing`	Present on the element when applicable.

Meter.Label

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

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-complete`	Present on the element when applicable.
`data-progressing`	Present on the element when applicable.

Meter.Track

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

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-complete`	Present on the element when applicable.
`data-progressing`	Present on the element when applicable.

Meter.Value

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

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet<[formattedValue: string, value: number]>

Data attributes

Attribute	Description
`data-complete`	Present on the element when applicable.
`data-progressing`	Present on the element when applicable.