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 span/div? The output element has built-in accessibility semantics and can be associated with inputs via the for attribute.

Basic Usage

Display a simple calculated or dynamic value.

$124.99 42

Code

<label>Calculated Total</label> <output>$124.99</output>

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

Default

Inline monospace text with subtle background.

Default output

.block

Block-level output for larger content.

This is a block-level output with more content that spans the full width.

.inline

Minimal inline output without background.

Your total is $99.99 including tax.

.highlight

Emphasized output with brand color.

$1,234.56

.large

Prominent display for important values.

$2,499.00

Code

<output>Default</output> <output class="block">Block output</output> <output class="inline">Inline</output> <output class="highlight">Highlighted</output> <output class="large">Large</output>

State Variants

Semantic colors for different message types.

Success Warning Error

Code

<output class="success">Operation completed</output> <output class="warning">Please review</output> <output class="error">Invalid input</output>

For Validation Messages

The primary use case in Vanilla Breeze. See form-field for the complete pattern.

Enter a valid email address

Code

<form-field> <label for="email">Email</label> <input type="email" id="email" required aria-describedby="email-msg" /> <output id="email-msg" for="email" aria-live="polite"> Enter a valid email address </output> </form-field>

With Range Slider

Display the current value of a range input.

Code

<label>Volume: <output id="volume">50</output>%</label> <input type="range" min="0" max="100" value="50" oninput="document.getElementById('volume').value = this.value" />

Calculated Values

Display computed results from multiple inputs.

$59.98

Code

<input type="number" id="qty" value="2" /> <input type="number" id="price" value="29.99" /> <output for="qty price" class="large highlight">$59.98</output>

Live Status Updates

Use aria-live for dynamic content that should be announced.

Connected All changes saved

Code

<output aria-live="polite">Connected</output> <output aria-live="polite">All changes saved</output>

Why Output for Validation?

The <output> element is semantically ideal for form messages.

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

Accessibility Notes

  • Use for attribute: Associates output with related input(s)
  • Add aria-live: Use polite for updates that should be announced
  • Link with aria-describedby: Connect inputs to their validation outputs
  • Don't use for static content: Output is for dynamic/calculated values
  • Include meaningful content: Always have useful text, not just icons

CSS Reference

output { display: inline-block; font-family: var(--font-mono); padding: var(--size-2xs) var(--size-xs); background: var(--color-surface-raised); border-radius: var(--radius-s); } output.block { display: block; padding: var(--size-s) var(--size-m); } output.inline { padding: 0; background: transparent; } output.highlight { background: oklch(from var(--color-interactive) l c h / 0.1); color: var(--color-interactive); } output.large { font-size: var(--font-size-xl); padding: var(--size-s) var(--size-m); } output.success { background: oklch(60% 0.18 145 / 0.1); color: oklch(45% 0.15 145); } output.warning { background: oklch(75% 0.18 75 / 0.1); color: oklch(55% 0.15 75); } output.error { background: oklch(55% 0.2 25 / 0.1); color: oklch(50% 0.18 25); }

Related Elements

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