Vanilla Breeze

output

Displays the result of a calculation or user action. Semantically ideal for form validation messages, computed values, and dynamic results. Used extensively in the form-field custom element for validation feedback.

When to Use

  • Form validation messages (see form-field)
  • Calculated totals or results
  • Dynamic values that change based on user input
  • Displaying range slider values
  • Any result that is derived from other form controls

Why Output over div/span?

The <output> element is purpose-built for displaying results of calculations and user actions. It has three advantages that <div> and <span> lack:

  • Semantic meaning: Browsers and assistive technology understand that output contains a computed result
  • aria-live by default: Output has an implicit aria-live="polite" role, so screen readers announce changes automatically
  • for attribute: Directly associates the result with the input(s) that produced it, giving assistive technology a clear relationship
Approach Semantics Accessibility Recommendation
<output> Result of action Native support with for attribute Recommended
<span class="error"> None Requires manual ARIA Avoid
<div class="message"> None Requires manual ARIA Avoid

Basic Usage

Vanilla Breeze styles output as an inline-block element with monospace font, subtle raised background, and small border radius. Display a simple calculated or dynamic value:

Attributes

Attribute Purpose Example
for Space-separated IDs of related inputs for="qty price"
form Associates with a form by ID form="order-form"
name Name for form submission name="total"

Style Variants

Four CSS classes control presentation:

Class Effect
(default) Inline monospace with subtle raised background
.block display: block with larger padding for full-width output
.inline No padding or background — blends into surrounding text
.highlight Brand-tinted background with interactive color text
.large Increased font size (var(--font-size-xl)) for prominent values

Variants can be combined: class="large highlight" or class="block success".

State Variants

Semantic colors for different message types. Each state uses an OKLCH-based tinted background with matching text color.

Class Use Case
.success Confirmations, completed operations (green tones)
.warning Caution messages, pending review (amber tones)
.error Validation errors, failures (red tones)

For Validation Messages

The primary use case in Vanilla Breeze. Pair with form-field and aria-describedby for CSS-only validation feedback.

With Range Slider

Display the current value of a range input. The for attribute links the output to its source.

Calculated Values

Display computed results from multiple inputs. The for attribute accepts a space-separated list of input IDs.

Live Status Updates

Use aria-live="polite" for dynamic content that should be announced by screen readers when it changes.

Accessibility Notes

  • Use for attribute: Associates output with related input(s) for assistive technology
  • Add aria-live: Use polite for updates that should be announced (output has implicit live region semantics, but explicit is clearer)
  • Link with aria-describedby: Connect inputs to their validation outputs so screen readers announce the message when the input is focused
  • Don't use for static content: Output is for dynamic/calculated values
  • Include meaningful content: Always have useful text, not just icons

CSS Reference

Related

  • form-field - Uses output for validation messages
  • meter - Visual gauge for scalar values
  • progress - Task completion indicator
  • input - Form inputs that output relates to
  • data - Machine-readable value for static data
↑