編集可能フィールドEditableField
Experimental

読み取り表示と明示的な保存・キャンセル付き編集を切り替えられる、ラベル付きフィールドです。

タイトル

Campaign_Hero_2026

メモ

SNS配信用のメインビジュアル。長いメモは最大3行まで広がり、それ以上はフィールド内でスクロールします。

状態とバリエーション

タイトルやファイル名のように短い値を、保存・キャンセル付きで編集します。

タイトル

Campaign_Hero_2026

メモや説明文は最大行数を指定し、表示時も編集時も同じ高さで扱います。

メモ

SNS配信用のメインビジュアル。長いメモは最大3行まで広がり、それ以上はフィールド内でスクロールします。

保存後は通知で成功を伝え、編集した値が読み取り状態に反映されます。

タイトル

Campaign_Hero_2026

保存に失敗したら編集状態を保ち、通知とエラーテキストで理由を返します。

メモ

SNS配信用のメインビジュアル。保存時は必ずフィードバックを返します。

値が空の場合は、未入力時の表示で入力対象を示します。

代替テキスト

説明を追加

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

プロパティ	型	初期値	説明
label	ReactNode	-	読み取り/編集サーフェスの上に表示するラベルです。
value	string	-	読み取り状態で表示する確定済みの値です。
onSave	(value: string) => void \| Promise<void>	-	編集モードを有効にし、保存クリック時に trim 済みの入力値を受け取ります。reject すると編集状態を維持します。
labels	{ edit?: string; save?: string; cancel?: string }	-	編集操作のアクセシブル名と表示ラベルです。
error	ReactNode	-	フィールド下に表示するインラインエラーです。
minRows / maxRows	number	-	自動伸縮する textarea の高さを制御します。標準は 1 / 3 です。
placeholder	string	-	値が空のときに表示するテキストです。