Home
Previous componentNext component

Typing indicator

Open in fibo's Storybook

A typing indicator says who's writing a reply in a conversation. It names up to three people, then says "Several people are typing…". It leaves out the person looking at the screen, and keeps its height when nobody is typing, so the messages above it don't jump.

AnaPushed the new tokens to the branch.
BenLooking now. Is dark mode in there too?
AnaBoth themes, and the drift check passes.
Typing indicatorPress the buttons. The sentence follows, and the thread stays put.

Anatomy

A row of a fixed height with the dots and the sentence, plus a hidden status region that screen readers hear instead.

  1. Dots
  2. Sentence
  3. Row
The rowTwo people typing.

Variants and states

One personThe verb agrees with the count.
Three peopleUp to maxNames people are named, joined for the locale.
Several peoplePast maxNames, nobody is named, as Discord does from four people on.
Long namesEach name is cut short at maxNameLength. Screen readers still hear it in full.
Custom indicatorA person's indicator replaces the dots while they're the only one typing.
TranslatedA Spanish formatter with locale es. Intl.ListFormat supplies y.

Usage

  • 01Put it between the messages and the composer, where people look while they wait for a reply.
  • 02Keep it mounted for the life of the conversation. The status region has to be in the page before it changes, or screen readers miss the first announcement.
  • 03Name at most three people. Past that, a list of names is harder to read than a count.
  • 04In large rooms, consider turning it off. Teams does in chats of more than 20 people.

Translating it

format gets { count, names, list } and returns the whole sentence. Never build it from fragments like name + " and " + other: Russian and Polish have four plural forms, Arabic six and Japanese one, and the verb and the word order change with them. Write one sentence per case, as an ICU message for instance:

{count, plural,
  =0 {}
  one {{list} is typing…}
  other {{list} are typing…}
}

with a separate message for "Several people are typing…" when names is empty. Pass the same locale the messages use, so the names are joined in that language.

Best practices

DoSwitch to “Several people” past three names.
Don'tDon't list everyone. A long line of names gets cut off, and screen readers read the whole list.
DoPass currentUserId so people never see themselves.
Don'tDon't tell people that they're typing.

Accessibility

There's nothing to focus: the indicator only reports, so it never enters the tab order.

  • 01The sentence goes to a polite role="status" region that's in the page from the start, outside the message log, so it doesn't mix with new messages.
  • 02Announcements wait for the sentence to hold still for announceDelay milliseconds, 1.5 seconds by default, so a burst of people starting and stopping is heard once.
  • 03When everyone stops typing, the region empties without saying anything.
  • 04The dots and the visible text are hidden from screen readers, which hear the status region instead, with names in full.
  • 05The dots can run for longer than five seconds, so under reduced motion they hold still as a plain ellipsis (WCAG 2.2.2).

References