Editable

Demo

Features

• root/label/area/input/preview/control/edit_trigger/submit_trigger/cancel_trigger の anatomy を持ち、EditMode（Preview/Edit）で表示専用と編集可能を切り替える（editable.rs:163-180）。
• input（<input type="text">）は preview モード時に hidden、preview（<span>）は edit モード時に hidden を出力する（全パーツを DOM に掲載し hidden で切り替える方針、editable.rs:349-463）。
• edit_trigger/submit_trigger/cancel_trigger はいずれも <button type="button"> で、表示は現在モードに応じて hidden 切り替えされる（editable.rs:445-513）。
• activationMode/submitMode の実際の DOM 配線（focus/dblclick 起動・Enter/Escape/blur）は wasm-full 側の後続責務であり、本モジュールは data-activation-mode/data-submit-mode という SSR 静的ヒントのみを提供する（editable.rs module doc「スコープ外」節）。
• イシュー #1606 で ark-ui との参照突合を行い、EditableInputFlags（disabled/readonly/required/invalid）を root/label/area/preview/input へ共通で渡す設計へ揃え、label へ data-invalid/data-required、area へ data-disabled、preview へ data-disabled/data-readonly/data-invalid・aria-disabled/aria-invalid（該当時のみ）・tabindex="0"（!disabled && !readonly のときのみ）を追加した。activationMode に Click/None、submitMode に None を追加した。
• data-focus（area/label）・data-autoresize（input/preview）・aria-readonly（preview）は意図的に出力しない（data-focus は SSR 静的マークアップで表現できない実行時フォーカス状態、data-autoresize はレイアウト計測関心のため headless 層の対象外、aria-readonly は role なし span への付与が ARIA in HTML 上不正なため）。

API Reference

Arguments

Data Attributes

Examples

Edit mode

maxlength 付きの edit モード（submit/cancel トリガー表示）の例です。

自前 CSS の最小例

data-* 属性セレクタで見た目を組み立てる最小例です。

[data-scope="editable"][data-part="preview"] {
  cursor: text;
  border-bottom: 1px dashed transparent;
}
[data-scope="editable"][data-part="preview"]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
[data-scope="editable"][data-part="preview"][data-placeholder-shown] {
  color: #9ca3af;
  font-style: italic;
}
[data-scope="editable"][data-part="input"][data-invalid] {
  border-color: #dc2626;
}
[data-scope="editable"][data-part="root"][data-disabled] {
  opacity: 0.5;
}

Accessibility

Keyboard Interactions

WAI-ARIA