Fields

Output

The native output element for a result computed from other controls.

When to use it: Use it for a calculated value such as a price, a total, or a converted unit that follows one or more inputs.

On this page

Example
Anatomy
Step by step
Keyboard
Forms and accessibility
API reference

Example

Loading example…

Output.tsxtsx

import { useState } from "react";
import { Label, Output, Slider } from "@comp0/react";

export function Example() {
  const [seats, setSeats] = useState(5);

  return (
    <form className="flex max-w-xs flex-col gap-3">
      <Label
        className="text-base font-medium text-zinc-900 sm:text-sm dark:text-zinc-100"
        htmlFor="seats"
      >
        Seats
      </Label>
      <Slider
        className="w-full accent-teal-600 dark:accent-teal-400"
        id="seats"
        min={1}
        max={20}
        name="seats"
        value={seats}
        onChange={setSeats}
      />
      <p className="flex items-baseline justify-between text-base text-zinc-600 sm:text-sm dark:text-zinc-400">
        <span>{seats} seats at $12 each</span>
        <Output
          className="text-lg font-semibold text-zinc-950 tabular-nums dark:text-white"
          htmlFor="seats"
          name="total"
        >
          ${seats * 12}/mo
        </Output>
      </p>
    </form>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

Output
Native output element with an implicit polite status role. Owns a DOM element.

Step by step

1
Add the main part
Render Output where the result belongs and put the computed value in as its children.
2
Add the supporting parts
Point htmlFor at the ids of the controls the result is computed from.

Make the behavior clear

Recompute the children when an input changes; the implicit status role announces the new result politely. Give it a name to submit it with the form.

Exampletsx

<>
  <Slider id="seats" aria-label="Seats" value={seats} onChange={setSeats} />
  <Output htmlFor="seats" name="total">
    ${seats * 12}
  </Output>
  ;
</>;

Keyboard

Forms and accessibility

Submits its text content under name, and resets to its default value with the form.

Accessibility checklist

The implicit status role announces each change politely, so keep the content to the result itself and put the label in a separate element.
Name what the result is with visible text next to it, or with aria-label or aria-labelledby.
Avoid recomputing on every keystroke of a text input when the announcements would be noisy; commit on change instead.
Output is a native element, so as is only for styling needs; the default keeps the native semantics.

API reference

Importtsx

import { Output } from "@comp0/react";

`Output`

DOM element

Native output element with an implicit polite status role.

Prop	Type	Description
`htmlFor`	`string \| string[]`	The ids of the controls the result is computed from; a list is joined with spaces.
`name`	`string`	Submits the result with its form under this name.
`form`	`string`	The id of the form the output belongs to when it is outside it.
`as`	`ElementType`	Renders another element in place of the default; Fragment merges the props into its single child.