タグ入力UIのパターンをまとめてみた - Goodpatch Tech Blog
この記事は「Goodpatch Advent Calendar 2021」の 23 日目の記事です。 初めまして、フロントエンドエンジニアの かず と申します。 自社サービスの開発でタグ入力UIを実装することになり、他サービスではどのような仕様になっているかを調査しました。 この記事では、タグ入力UIについてパターンをまとめ、それぞれのメリット・デメリットについて考えたことを共有したいと思います。 タグ入力UIとは 使用例とパターン テキストフィールド内に追加されていくパターン テキストボックスの外に追加されていくパターン ドロップダウンリストから選択するパターン ユーザー操作に対する挙動の違い タグ追加のタイミング 特定のキーを押してタグ追加 最初からタグとして入力されている テキストボックスからフォーカスが外れたときの入力文字の扱い タグ化される 消去される そのまま残る 候補表示のタ
app.socie.com.br
blog.goo.ne.jp/pritadiary
laiso.hatenablog.com
inakatano2.hatenablog.com
hiro989.hatenablog.com
www.chunichi.co.jp
