フォーム v1.0.0

タグ入力

値が入力されると削除可能なタグ/チップを作成するテキスト入力。 バリデーション、最大タグ数制限、オートコンプリート候補に対応しています。 Enterキー、カンマ区切り、またはカスタム区切り文字でタグを追加できます。 フォーム送信のためにhidden入力が自動的に生成されます。

プレビュー & コード

オプション

名前 型 デフォルト 説明
tags Array [] Initial array of tag strings to pre-populate
max_tags Integer nil Maximum number of tags allowed (nil for unlimited)
placeholder String "Add a tag..." Placeholder text shown in the text input
label String nil Label text rendered above the component
hint String nil Hint text rendered below the component
error String nil Error message rendered below the component
validate Symbol nil Validation mode: :email, :url, or nil for no validation
suggestions Array [] Array of strings shown as autocomplete suggestions
allow_duplicates Boolean false Whether duplicate tags are permitted
delimiter String "," Character that triggers tag creation when typed (Enter always works)
name String nil Form field name for hidden inputs (submitted as name[])
disabled Boolean false Disables all interaction with the component
tag_colors Boolean false Automatically assign distinct colors to each tag chip

変更履歴 v1.0.0

- Initial release with Enter/delimiter tag creation
- Autocomplete suggestions with keyboard navigation
- Email and URL validation modes
- Max tags limit with live counter
- Auto-colored tag chips option
- Hidden inputs for seamless Rails form submission
- Dark mode support

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得