Meter

Solidtype_heroui.Meter is Kobalte’s Meter.Root, a <div role="meter">, with the classes HeroUI’s own meterVariants gives. Its label names it, its output shows its value as Kobalte formats it for the reader’s locale, a percentage, and its fill is as wide in its track as its value is far along its range.

Usage

Storage60%

meter_usage.mlx

module Label = Solidtype_heroui.Label
module Meter = Solidtype_heroui.Meter

let make () =
  <Meter class_="w-64" value=60.>
    <Label>"Storage"</Label>
    <Meter.Output />
    <Meter.Track><Meter.Fill /></Meter.Track>
  </Meter>

Anatomy

<Meter value=60.>
  <Label>"Storage"</Label>
  <Meter.Output />
  <Meter.Track><Meter.Fill /></Meter.Track>
</Meter>

Examples

Sizes

Size sm30%

Size md50%

Size lg70%

meter_sizes.mlx

module Label = Solidtype_heroui.Label
module Meter = Solidtype_heroui.Meter

let make () =
  <div class_="flex w-64 flex-col gap-6">
    <Meter class_="w-64" size=`sm value=30.>
      <Label>"Size sm"</Label>
      <Meter.Output />
      <Meter.Track><Meter.Fill /></Meter.Track>
    </Meter>
    <Meter class_="w-64" size=`md value=50.>
      <Label>"Size md"</Label>
      <Meter.Output />
      <Meter.Track><Meter.Fill /></Meter.Track>
    </Meter>
    <Meter class_="w-64" size=`lg value=70.>
      <Label>"Size lg"</Label>
      <Meter.Output />
      <Meter.Track><Meter.Fill /></Meter.Track>
    </Meter>
  </div>

Colors

Default50%

Accent60%

Success70%

Warning80%

Danger90%

meter_colors.mlx

module Label = Solidtype_heroui.Label
module Meter = Solidtype_heroui.Meter

let make () =
  <div class_="flex w-64 flex-col gap-6">
    <Meter class_="w-64" color=`default value=50.>
      <Label>"Default"</Label>
      <Meter.Output />
      <Meter.Track><Meter.Fill /></Meter.Track>
    </Meter>
    <Meter class_="w-64" color=`accent value=60.>
      <Label>"Accent"</Label>
      <Meter.Output />
      <Meter.Track><Meter.Fill /></Meter.Track>
    </Meter>
    <Meter class_="w-64" color=`success value=70.>
      <Label>"Success"</Label>
      <Meter.Output />
      <Meter.Track><Meter.Fill /></Meter.Track>
    </Meter>
    <Meter class_="w-64" color=`warning value=80.>
      <Label>"Warning"</Label>
      <Meter.Output />
      <Meter.Track><Meter.Fill /></Meter.Track>
    </Meter>
    <Meter class_="w-64" color=`danger value=90.>
      <Label>"Danger"</Label>
      <Meter.Output />
      <Meter.Track><Meter.Fill /></Meter.Track>
    </Meter>
  </div>

Without Label

A meter no label names is named by its aria_label.

meter_without_label.mlx

module Label = Solidtype_heroui.Label
module Meter = Solidtype_heroui.Meter

let make () =
  <Meter class_="w-64" aria_label="Storage usage" value=45.>
    <Meter.Track><Meter.Fill /></Meter.Track>
  </Meter>

Custom Value Scale

Revenue75%

meter_custom_scale.mlx

module Label = Solidtype_heroui.Label
module Meter = Solidtype_heroui.Meter

let make () =
  <Meter class_="w-64" max_value=1000. min_value=0. value=750.>
    <Label>"Revenue"</Label>
    <Meter.Output />
    <Meter.Track><Meter.Fill /></Meter.Track>
  </Meter>

Format Options

format_options formats the output and what a reader is told, by Kobalte’s number formatter in the reader’s locale: a percent, the default, is the value’s share of its range, and any other style the value itself.

Revenue$750.00

meter_format.mlx

module Label = Solidtype_heroui.Label
module Meter = Solidtype_heroui.Meter
module Format = Solidtype_kobalte.Types.NumberFormatOptions

let make () =
  <Meter
    class_="w-64"
    max_value=1000.
    value=750.
    format_options=(fun () -> Format.make ~style:`currency ~currency:"USD" ())>
    <Label>"Revenue"</Label>
    <Meter.Output />
    <Meter.Track><Meter.Fill /></Meter.Track>
  </Meter>

Styling Reference

CSS Classes

• .meter, and its colors .meter--default, .meter--accent, .meter--success, .meter--warning, .meter--danger, and sizes .meter--sm, .meter--md, .meter--lg
• .meter__output, .meter__track, .meter__fill

API Reference

Each prop beside the name HeroUI’s React component gives it.

Meter

React	solidtype	Type	Default	Description
value	value	float	required	Its value
minValue	min_value	float	0.	The least value
maxValue	max_value	float	100.	The greatest value
color	color	[ `default | `accent | `success | `warning | `danger ]	`accent	Its color
size	size	[ `sm | `md | `lg ]	`md	Its size
aria-label	aria_label	string		Its name where no label names it
className	class_	string		Added after HeroUI’s classes
formatOptions	format_options	Solidtype_kobalte.Types.NumberFormatOptions.t	a percent	How its value is shown

Meter.Output, Meter.Track, Meter.Fill

Each takes class_, added after HeroUI’s class; the output children, in place of its value.

Beside React

Original HeroUI documentation: Meter.

The same HeroUI Meter twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two meters: a marked row is one they disagree on.

solidtype — OCaml, on Solid and Kobalte

Storage60%

React — TypeScript, on React Aria

attribute	solidtype	React