TypingIndicator

相手が入力中であることを示す、順に明るくなる 3 つの点。

GitHub でソースを見る

プレビュー

入力中入力中入力中宮田 千夏さんが入力中

使いどころ

使う場面

  • チャットやコメント欄で、相手が入力中であることを小さく示す（点が順に明るくなる）
  • 誰が入力中かを伝えたいときは、label に「宮田 千夏さんが入力中」のように渡し、近くに同じ文を表示する
  • size は置く場所に合わせる。吹き出しの中や文字の横は sm、既定は md、チャットの下端に独立して置くなら lg

使わない場面

  • 処理の待ち。意味と読み上げが違うので Spinner を使う（Spinner は「読み込み中」、これは「入力中」を伝える）
  • データの読み込み。形が決まっているなら Skeleton を使う
  • 入力が終わったあとも出し続けること。相手の入力が止まったら消す

使い方

<TypingIndicator />
<TypingIndicator size="sm" label="宮田 千夏さんが入力中" />

プロパティ

名前型デフォルト説明
size"sm" | "md" | "lg""md"14 / 18 / 24px
labelstring"入力中"読み上げ用の文言

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

  • role="status" が付き、表示されると label（既定は「入力中」）が控えめに読み上げられる。点は装飾なので読み上げられない
  • 入力中は頻繁に出入りするので、画面内に 1 つだけ置く。複数人なら「2 人が入力中」のように 1 つにまとめる
  • prefers-reduced-motion では点の動きを止め、少し薄い静止した点で表示する

文言

  • label は「〇〇さんが入力中」のように、主語を入れる。入力者を示さないなら既定の「入力中」で足りる

関連するコンポーネント