TypingIndicator

<caos-typing-indicator>

the line that says somebody is writing a reply

May be placed on a record page, an app’s home page and a page inside an app.

Inputs

Name	Attribute	Description	Type	Default	Required
who	who, markup only	The name of the person composing. Unset, the line says that someone is typing without claiming who — which is what a surface that knows a reply is coming but not from whom should say.	text	none declared	Optional

Events

This piece raises no events.

Slots

Nothing goes inside this piece.

Styling hooks

Design token	What it controls
--caos-color-text-muted	The sentence and the dots — quiet, because it is not the message.
--caos-font	The typeface the sentence is set in.
--caos-text-row	The size of the sentence, matched to a dense row rather than to body text.
--caos-space-2	The gap between the sentence and the dots.
--caos-space-1	The space above and below the line.
--caos-space-3	The inset from the edge of the stream, so it lines up with the messages.
--caos-radius-pill	The roundness of each dot.

Methods

Nothing else drives this piece by calling it.

Readable state

Nothing on this piece can be read back.

Styling parts

Part	Which piece of it	When it is there
::part(indicator)	the whole line	Always
::part(label)	the sentence	Always
::part(dots)	the three animated dots	Always

When to use it

While a reply is genuinely being composed and its arrival is expected within a few seconds — a person typing, or an assistant generating. It is a promise that something is coming, so showing it when nothing is on its way is worse than showing nothing.

What to use instead

• SkeletonBlock — Content is loading rather than being written. A skeleton says “this is arriving”; this says “somebody is deciding what to say”, which is a different wait with a different length.
• ProgressBar — The wait has a measurable end. Nobody knows how long a sentence takes to write.
• StatusDot — The subject is whether somebody is present or reachable at all, which is a steady condition rather than a thing they are doing this second.

Accessibility

The line is a role="status" live region, so it is announced without taking the reader away from what they were reading — status and not alert, because somebody starting to type is not urgent enough to interrupt a sentence in progress. The dots are aria-hidden: they carry nothing the sentence does not. Under prefers-reduced-motion: reduce they stop moving entirely, which matters more here than on most animations because this one has no end of its own — it runs until somebody else finishes typing. Left to the author: removing the element when the message arrives. Nothing here can know that, and a live region that keeps saying someone is typing is a false statement that a screen reader keeps repeating.

Examples

While a colleague is replying

Named, at the foot of the stream.

{
  "id": "example",
  "section": "While a colleague is replying",
  "columns": 1,
  "items": [
    {
      "id": "typing_indicator_1",
      "type": "component",
      "key": "typing_indicator",
      "inputs": {
        "who": "Ada Lovelace"
      }
    }
  ]
}

<caos-typing-indicator who="Ada Lovelace"></caos-typing-indicator>

When the source is not known

No name: the surface knows a reply is coming but not from whom, and the line says exactly that rather than guessing.

{
  "id": "example",
  "section": "When the source is not known",
  "columns": 1,
  "items": [
    {
      "id": "typing_indicator_1",
      "type": "component",
      "key": "typing_indicator"
    }
  ]
}

<caos-typing-indicator></caos-typing-indicator>