Core · Form fields
Values
Show or compute a value instead of collecting text: meter and output.
Meter
A bar for a value in a known range, such as storage used, drawn next to its figure.
Code
Copy the markup
A native <meter> with its range. The text inside is for browsers that do not draw it:
<div class="luz-field">
<label class="luz-field__label" for="storage">Storage used, 6 of 10 GB</label>
<meter class="luz-meter" id="storage" min="0" max="10" value="6">6 of 10 GB</meter>
</div>Variants and options
min,max,value: the range and the figure.- Do not set
low,highoroptimum: the bar is always the brand colour, never a green or a red.
How it works
A native <meter> drawn by components/meter.css as an 8 px bar: a brand fill on a muted track with the field's border colour. The bar is a picture of a number that is already text. See the Meter page for tables and lists.
Without JavaScript
The bar is drawn and the figure is in the label. Nothing changes without your script, which sets value.
Keyboard and ARIA
- A meter takes no focus and has no keys.
- Give the figure and the unit in the label, or hide the bar with
aria-hidden="true"when the figure is next to it.
Contrast and focus are in the Design tab.
Design
When to use
Use a meter for a value inside a known range: a share, a count against a maximum.
- Storage used, seats taken, a score out of ten.
- Write the figure next to the bar: the bar alone is not a number.
When not to use
A meter is a gauge, not a task in progress.
Do and don't
Writing the content
- Label it with the figure and its unit: "Storage used, 6 of 10 GB".
- Say what is measured, not what the bar looks like.
- Never rely on the colour of the bar: it is the brand colour in every state.
Contrast and focus
Shared with the other value controls: contrast and focus of values.
Tokens it uses
Shared with the other value controls: tokens of values.
Keyboard and ARIA are in the Code tab.
Output
The result of a calculation or of a control, such as the number beside a slider.
Code
Copy the markup
A native <output>; for lists the ids of the controls it comes from:
<p>Total: <output class="luz-output" id="total" for="qty price">12</output> seats</p>Variants and options
.luz-output: the face of the interface, the brand colour, figures of equal width, at least 2.5 em wide and aligned to the end.- A bare
<output>with no class: a small chip in the mono face.
How it works
A native <output>. Your script writes its value; LUZ does not calculate. An output is not sent with the form, and its implicit ARIA role is status.
Without JavaScript
The output shows the value written in the HTML. Nothing recalculates without your script.
Keyboard and ARIA
- An output takes no focus and has no keys.
- Tie it to its sources with
for, and put the unit in the text around it.
Contrast and focus are in the Design tab.
Design
When to use
Use an output for a value that your page calculates or that a control sets, shown as text.
- The number beside a range, a total, a result.
- Write the unit next to it: "12 seats".
When not to use
An output shows a value; it does not collect one.
- A value the reader types: an number or a text field.
- Text that never changes: a paragraph or a span.
Do and don't
Writing the content
- Put the figure in the output and the unit in the text around it.
- Label what is counted: "Seats", "Total".
- Keep the text short: an output is for a value, not a sentence.
Contrast and focus
Shared with the other value controls: contrast and focus of values.
Tokens it uses
Shared with the other value controls: tokens of values.
Keyboard and ARIA are in the Code tab.
Contrast and focus of values
The label is secondary text on the page; the bar and the figure have to be seen against it.
| Part | Colour on background | Light | Dark | High contrast | Needs |
|---|---|---|---|---|---|
Label | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Meter fill | --luz-brand-primary on --luz-surface-muted | 5.6:1 | 7.7:1 | 13.5:1 | 3:1 |
Meter edge | --luz-input-border on --luz-surface-page | 3.7:1 | 4.2:1 | 21.0:1 | 3:1 |
Output figure | --luz-brand-primary on --luz-surface-page | 5.6:1 | 7.7:1 | 14.1:1 | 4.5:1 |
Output with no class | --luz-text-primary on --luz-surface | 16.5:1 | 14.0:1 | 21.0:1 | 4.5:1 |
Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings, borders and icons.
- Focus: a meter and an output take no focus, so they have no ring.
- Not colour alone: the bar is the brand colour in every state; its figure is text.
- Target: neither is a control the reader presses.
Tokens of values
The 11 tokens that these controls' rules read, by token family. Each family links to its page, with the values in every mode.
- Spacing and sizing
--luz-space-2xs,--luz-space-xs- Typography
--luz-font-mono,--luz-font-sans,--luz-text-md,--luz-text-xs- Radius
--luz-radius-sm
Known issues
None known.