タグ入力TagInput
Experimental

複数のタグを入力・削除できるタグ入力欄です。

状態とバリエーション

Enter またはカンマでタグを追加し、各タグの削除ボタンで取り外します。

タグ

資料確認中

Enter またはカンマでタグを追加できます。

タグ数に上限がある場合は補足文で条件を伝えます。

タグ

資料確認中

最大 3 件まで追加できます。

編集できない理由はツールチップと補足文で伝えます。

タグ

資料確認中

アーカイブ済みの素材ではタグを編集できません。

表は横にスクロールできます

プロパティ	型	初期値	説明
id	string	-	内部の入力欄に付与する id です。ラベルとの紐づけに使います。
value	string[]	-	外部から制御するタグ一覧です。
onValueChange	(value: string[]) => void	-	タグが変わった時に呼ばれます。
placeholder	string	'Add tag...'	タグがない時に表示する補助テキストです。
commitKeys	string[]	['Enter', ',']	入力中の文字列をタグとして確定するキーです。
dedupe	boolean	true	大文字小文字を無視して重複タグを拒否します。
maxTags	number	-	追加できるタグ数の上限です。
removeLabel	string	'Remove tag'	削除ボタンの支援技術向けラベルです。
disabled	boolean	false	編集できない状態にします。理由はツールチップで補足します。