Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - meter
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<h3>Accessibility</h3> <p>A label is required when using Meter. Use one of these options:</p> <ul> <li>Visible label using MeterLabel, with htmlFor set equal to the id of the Meter (preferred)</li> <li>Visible label that's associated to the Meter with aria-labelledby</li> <li>Label directly using aria-label</li> </ul> <h2>Examples</h2> <h3>Default</h3> <p>Use a Meter to communicate an amount of something within a range, like number of emails delivered. Use the valueLabel prop on the MeterLabel component to display the current value being represented by the Meter.</p> <div class="example-section"> <div class="meter-example"> <div class="paste-meter-label"> <label for="default-meter">Emails delivered</label> <span>8,000 of 10,000</span> </div> <div class="paste-meter"> <div class="paste-meter-fill" style="width: 80%"></div> </div> <div class="paste-help-text">Delivered in the last 30 days</div> </div> </div> <h3>Min and max values</h3> <p>Meter has a default value of 0, a default minimum value of 0, and a default maximum value of 100.</p> <p>Passing minValue and maxValue to Meter allow you to set a non 0-100 scale. Use minLabel and maxLabel to display minimum and maximum values below the Meter. If using a non 0-100 scale, displaying min and max labels is required.</p> <div class="example-section"> <div class="meter-example"> <div class="paste-meter-label"> <label for="minmax-meter">Storage used</label> <span>1.2 GB</span> </div> <div class="paste-meter"> <div class="paste-meter-fill" style="width: 60%"></div> </div> <div class="paste-meter-min-max"> <span>0 GB</span> <span>2 GB</span> </div> </div> </div> <h2>Composition notes</h2> <p>The Meter label should communicate what the Meter is measuring. Where possible, avoid a label that wraps onto two lines.</p> <p>A Meter almost always will include a numerical value, the value label. When using the valueLabel prop, consider what type of value would be most useful for a user to see. For example, choose either "50%" or "5,000 of 10,000", not both.</p> <p>Use Help Text to offer additional information to contextualize or help the user understand the Meter.</p> <h2>When to use a Meter</h2> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use a Meter when a user needs to understand a measurement within a range (like how much data has been used).</p> <div class="meter-example"> <div class="paste-meter-label"> <label for="do-meter">Data usage</label> </div> <div class="paste-meter"> <div class="paste-meter-fill" style="width: 79%"></div> </div> </div> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use a Meter to represent a path with a completion point (like uploading a file or filling out a form).</p> <div class="meter-example"> <div class="paste-meter-label"> <label for="dont-meter">File upload status</label> </div> <div class="paste-meter"> <div class="paste-meter-fill" style="width: 23%"></div> </div> </div> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>When using a custom value label, use only the format that is the most useful for a user to know.</p> <div class="meter-example"> <div class="paste-meter-label"> <label for="do-meter2">Balance</label> <span>$1,259</span> </div> <div class="paste-meter"> <div class="paste-meter-fill" style="width: 84%"></div> </div> <div class="paste-meter-min-max"> <span>$0</span> <span>$1,500</span> </div> <div class="paste-help-text">Complete balance due at the end of the billing cycle.</div> </div> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't show multiple formats of the same value when possible.</p> <div class="meter-example"> <div class="paste-meter-label"> <label for="dont-meter2">Balance</label> <span>$1,259 of $1,500 (84%)</span> </div> <div class="paste-meter"> <div class="paste-meter-fill" style="width: 84%"></div> </div> <div class="paste-meter-min-max"> <span>$0</span> <span>$1,500</span> </div> <div class="paste-help-text">Complete balance of $1,500 due at the end of the billing cycle.</div> </div> </div> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> <script> // Interactive functionality for meters document.addEventListener('DOMContentLoaded', function() { // Add hover effects and animations const meters = document.querySelectorAll('.paste-meter-fill'); meters.forEach(meter => { meter.addEventListener('mouseenter', function() { this.style.transform = 'scaleY(1.1)'; }); meter.addEventListener('mouseleave', function() { this.style.transform = 'scaleY(1)'; }); }); // Animate meters on load setTimeout(() => { meters.forEach(meter => { const width = meter.style.width; meter.style.width = '0%'; meter.style.transition = 'width 1s ease-out'; setTimeout(() => { meter.style.width = width; }, 100); }); }, 500); }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">