Dither Meter
betaA capacity bar drawn in dithered cells, split into categories that fill with a spring, with a category legend.
- Data
- 1 file
- 1 npm package
- Accessibility notes
- Draws on a canvas
Loading the example…
pnpm dlx @dowel-ui/cli add dither-meternpm packages installed: class-variance-authority.
import { METER } from "@/components/ui/dither-meter";Default
Storage Capacity Bar
Gallery
Pinned Category
With Visible Table
Static
<DitherMeter>
| Prop | Type | Default |
|---|---|---|
label (required)What the bar measures. Names the meter and the data table. | string | — |
segments (required) | readonly DitherMeterSegment[] | — |
activeSegmentThe pinned category key (controlled). | string | null | — |
animate | boolean | true |
categoryLabelData table headers. | string | "Category" |
cell | number | 3 |
defaultActiveSegment | string | null | null |
descriptionReplaces the generated breakdown in the meter's aria-valuetext. | string | — |
formatPercentFormats a 0..1 share. Defaults to a whole percentage. | (share: number) => string | wholePercent |
formatValue | (value: number) => string | formatDitherValue |
freeLabelName of the unused remainder. | string | "Free" |
maxCapacity. Defaults to the sum of the segments (a full bar). | number | — |
onActiveSegmentChange | (key: string | null) => void | — |
shareLabel | string | "Share" |
showLegendShow the category buttons. | boolean | true |
showTableShow the data table. It is always present for assistive technology. | boolean | false |
showValueShow the "used of capacity" line. | boolean | true |
size | "sm" | "md" | "lg" | "md" |
valueLabel | string | "Value" |
Plus every attribute of <div> except children.
The bar is a role="meter" named by label, with used over capacity as aria-valuenow / aria-valuemax and the per-category breakdown as aria-valuetext (or `description`). Legend entries are buttons, named with category and value, that preview a segment on hover or focus and pin it when pressed (aria-pressed). The visible used-of-capacity line is aria-hidden as it repeats the meter. The data is always in a table, visually hidden unless showTable is set.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes