EditableProperty

id・label・name を渡し、value に今の値を渡します。項目名は小さな太字、表示の値は下線も枠もない文字です。値のすぐ後ろに灰色の鉛筆を置き、値と鉛筆を囲む領域にホバーすると、押すと書き換えられることを示す黄色のハイライト（#ffffcc）の面を出します。鉛筆はホバーすると赤になります。値が空の時は emptyLabel を灰色で出します。

鉛筆を押しても、値そのものを押しても書き始めます（文字を選んでいる時は書き始めません）。一行の値は全体を選び、そのまま打てば置き換わります。multiline の値は末尾から書き足せ、表示でも改行をそのまま出します。書いている間はBasecamp 2のTo-doのその場での編集と同じく、枠も面も付けずに文字の下へ灰色（#ccc）の1pxの点線を引き、フォーカスした欄は点線を青い2pxの線にします。表示と編集で文字の大きさ・一行目の高さ・書き始めは変わりません。

確定（小さい主操作）と取消（文字だけの操作）は、一行・複数行とも欄の下に並べます。確定は Control + Enter・⌘ + Enter、取消は Escape でもでき、Enterだけでは確定しません。確定すると新しい値を表示へ移し、鉛筆の位置に緑のチェックの完了のマークを1.6秒出します（アニメーションはしません）。確定・取消の後はフォーカスを鉛筆に戻します。

required・maxLength は欄の標準の検証として働き、確定の時に検証して、通らなければ書いたまま検証メッセージを出します。フォームの送信で検証に通らなかった時も、書いている状態に切り替えます。

保存は editable:commit で受け取り、保存しない時は editable:beforecommit を取り消します。確定した値は欄に残るので、form に結び付けてフォームの値として送ることもできます。フォームのリセットでは最初の値に戻して表示に戻ります。保存・保存失敗の通知・値の検証ルールは利用側が持ちます。

EditableController を editable、EditablePropertyController を editable-property として登録します。JavaScriptなしでは、確定・取消を隠した通常の入力欄として表示し、フォームで値を送れます。