タグエディタTagEditorExperimental
タグ入力、削除、候補からの追加をまとめて扱うタグ編集 UI です。
プレビュー
タグ2/6
ヒーローWeb
状態とバリエーション
候補付き
よく使うタグを候補として置き、クリックで追加できるようにします。
タグ2/6
ヒーローWeb
コンパクト
インスペクターやサイドバーなど、幅の狭い領域では密度を上げます。
配信タグ
SNS短尺
最大数
タグ数の上限がある場合はカウンターを表示し、追加できない状態を明確にします。
最大3件3/3
Web広告公開前
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | string[] | - | 現在のタグです。 |
| onValueChange | (value: string[]) => void | - | タグの追加・削除時に呼び出されます。 |
| suggestions | string[] | - | 入力欄の下に表示する候補タグです。既に選ばれたタグは除外されます。 |
| label | ReactNode | "Tags" | タグ欄のラベルです。不要な場合は空にできます。 |
| placeholder | string | "Add tag..." | 入力欄のプレースホルダーです。 |
| removeLabel | string | "Remove tag" | タグ削除ボタンのアクセシブル名とツールチップ文言です。 |
| maxTagsReachedLabel | string | "Maximum number of tags reached" | 最大数に達して候補を追加できないときに表示するツールチップ文言です。 |
| disabledLabel | string | "Tag editing is disabled" | 無効化された候補操作に表示する理由です。 |
| maxTags | number | - | 追加できる最大タグ数です。 |
| variant | "default" | "compact" | "default" | 余白と入力密度を切り替えます。 |
| disabled | boolean | false | 入力と候補操作を無効化します。 |
使い方
Loading...