条件付きフィールド

モードセレクタに依存するフォーム — 「operation: insert」にフィルタ列は不要、「rule: range」には 2 つ目の境界値が必要 — は、全フィールドを見せたままだとタスク以上に複雑に見えます。かといってセレクタが変わるたびにサーバサイドで再レンダリングすれば、フォーカスと入力途中の値を失う往復が発生します。installShowWhen ビヘイビアはこの配線を宣言的に引き受けます: data-hc-show-when が「この要素が見えるスイッチ値」をマークアップだけで指定するので、厳格な Content-Security-Policy: default-src 'self'(インライン JS なし)でも動作します。

このレシピには installShowWhen() ビヘイビアが必要です。 import '@hypermedia-components/core/behaviors'; で全ビヘイビアをまとめてインストールするか、これだけを:

import { installShowWhen } from '@hypermedia-components/core';
installShowWhen();

インストールを参照。

別名: 動的フォーム、条件分岐フォーム。

ライブデモ

下のプレビューはそのままライブです — 条件付き表示は純粋にクライアントサイド(installShowWhen はページ上にすでにある値から hidden 属性をトグルするだけ)なので、サーバ契約も api/recipes/conditional-fields/ 名前空間もありません。Rule を exact と range で切り替えると、リクエストなしで Upper bound が現れるのを確認できます。

マークアップ

制御するフォームコントロールに data-hc-show-switch を付け、依存する各要素に data-hc-show-when="<value> [<value> …]" — その要素が見えるスイッチ値の空白区切りリスト — を付けます:

<form method="post" action="/rules">
  <label class="hc-field">
    <span class="hc-field__label">Rule</span>
    <select class="hc-select" name="rule" data-hc-show-switch>
      <option value="exact" selected>exact</option>
      <option value="range">range</option>
    </select>
  </label>

  <label class="hc-field" data-hc-show-when="exact range">
    <span class="hc-field__label">Bound</span>
    <input class="hc-input" name="bound" type="number">
  </label>

  <label class="hc-field" data-hc-show-when="range" hidden>
    <span class="hc-field__label">Upper bound</span>
    <input class="hc-input" name="upper" type="number">
  </label>

  <button class="hc-button" data-variant="primary">Save</button>
</form>

流れは次のとおり:

インストール時にすべての [data-hc-show-when] を一度評価するので、サーバレンダリングされた状態は操作前から正しくなります。
スイッチの change のたびに表示を再評価します — リクエストなし、フォーカスはそのまま、入力途中の値も生き残ります。
表示の実体は hidden 属性です — インラインの display スタイルは決して使わないので、CSS はそのまま機能します。自身の display が UA の [hidden] ルールに勝つキットのコンテナは [hidden] を再表明しています(.hc-field がそうです)。display を設定する独自のコンテナには同じ 1 行(.my-container[hidden] { display: none; })を与えてください。

スイッチの解決

条件付き要素ごとに、制御する入力は最も近い form の [data-hc-show-switch] コントロールです。任意のフォームコントロールが使えます: select、ラジオグループ(各ラジオにマークを付け、checked のものの値が採用されます)、チェックボックス(checked なら value — デフォルト "on" — 、そうでなければ空文字列)、テキスト入力。

フォームをまたぐ場合は、条件付き要素の data-hc-show-src="<css-selector>" が解決を上書きします(document に対して解決):

<select id="global-mode" data-hc-show-switch>…</select>

<form>
  <div data-hc-show-when="sql" data-hc-show-src="#global-mode">…</div>
</form>

スイッチを解決できない要素には触れません — サーバレンダリングされた hidden 属性はそのまま残ります。

隠れたフィールドも送信される

このビヘイビアはコントロールを disabled にしたり name を外したりはしません — 隠れたフィールドの値もそのまま POST されます。選択中のモードが読まない値を除外するのはサーバの仕事で、表示はプレゼンテーションです。古い隠れ値をサーバに届かせたくない場合は、表示レイヤと戦うのではなく、サーバ側(またはサーバの再レンダリング)でクリアしてください。

htmx

htmx でスワップインされたフィールドは到着時に評価されます (MutationObserver に加えて htmx:afterSwap / htmx:oobAfterSwap イベント)— 再初期化は不要です。カスケードセレクトレシピと組み合わせられます: カスケードセレクトは次のレベルをサーバから読み込み、条件付きフィールドはすでにページ上にあるものを見せ隠しします。

プログレッシブエンハンスメント

ビヘイビアなしでは、すべてのフィールドが単に見えるだけです — フォームは賑やかに見えますが完全に使用可能なままで、サーバ契約も変わりません。初期の hidden 属性はデフォルトのスイッチ値に合わせてサーバサイドでレンダリングしてください(上のデモがそうしているように)。バンドルの読み込み前から初回描画が正しくなります。

アクセシビリティ

hidden は、隠れている間そのフィールドをアクセシビリティツリーとタブ順序から取り除きます — スクリーンリーダーとキーボードのユーザーは目の見えるユーザーとまったく同じものを見ます。
各条件付きブロックはラベルつきの完結したフィールド(ラベルを内包する .hc-field)に保ってください。表示された瞬間にラベルのないコントロールが現れることがなくなります。
表示されるフィールドはスイッチの直後に DOM 順で現れます。ビヘイビアはフォーカスを決して動かしません — ユーザーは自然にタブ移動を続けられます。