XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Meter

Previous: MessageNext: Morphic Toast

Shows a measurement within a known range, such as storage used.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import {2  Meter,3  MeterIndicator,4  MeterLabel,5  MeterTrack,6  MeterValue7} from "xiod-ui/meter";

Anatomy

1<Meter>2  <MeterLabel />3  <MeterValue />4  <MeterTrack>5    <MeterIndicator />6  </MeterTrack>7</Meter>

API Reference

Detailed documentation of properties and options.

Meter

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
valueReq
number
–

The current value.

aria-valuetext
MessageMorphic Toast
string
–

A string value that provides a user-friendly name for aria-valuenow, the current value of the meter.

format
NumberFormatOptions
–

Options to format the value.

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
LocalesArgument
–

The locale used by Intl.NumberFormat when formatting the value. Defaults to the user's runtime locale.

max
number
100

The maximum value

min
number
0

The minimum value

MeterIndicator

Accepts className, style and render, plus every native attribute of the element it renders.

MeterLabel

Accepts className, style and render, plus every native attribute of the element it renders.

MeterTrack

Accepts className, style and render, plus every native attribute of the element it renders.

MeterValue

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
children
((formattedValue: string, value: number) => ReactNode) | null
–

The content of the component.