多重選擇及補充說明 (Checkable)

  • 新提案
  • 封閉測試
  • 公開測試
  • 已穩定
成熟度說明
  • 新提案:未完成開發、請勿使用。
  • 封閉測試:開發暫時性完成,可使用。可能仍有親和力或其他使用上問題待透過實測發現。
  • 公開測試:開發暫時性完成,歡迎使用。具有完整親和力報告。
  • 已穩定:開發完成、歡迎使用。應無任何親和力或使用上問題。

追加欄位

HTML
<fieldset class="fieldset">
  <label class="field-label">認證方式</label>
  <div class="checkable-wrapper-v">
    <div class="checkable-item">
      <input class="chcecked--extra-fields" type="checkbox" name="identification" id="v-healthid-input" value="healthid">
      <label for="v-healthid-input">健保卡</label>
      <div class="fields">
        <fieldset class="fieldset">
          <label for="healthid-required" class="field-label">健保卡卡號 <span class="field-required">必填</span></label>
          <input type="text" id="healthid-required" inputmode="number" aria-required="true" class="field-input">
        </fieldset>
      </div>
      
    </div>
    <div class="checkable-item">
      <input class="chcecked--extra-fields" type="checkbox" name="identification" id="v-moica-input" value="moica" checked>
      <label for="v-moica-input">自然人憑證
        <div class="desc">
          自然人憑證是可以在網路上作資料交換時,如同網路身分證辨識雙方身分。「憑證」包含了「數位簽章」跟「公開金鑰」。
        </div>
      </label>
      <div class="fields">
        <button type="button" class="button button-primary">行動自然人憑證驗證</button>
      </div>
      
    </div>
    <div class="checkable-item">
      <input class="chcecked--extra-fields" type="checkbox" name="identification" id="v-phone-input" value="phone">
      <label for="v-phone-input">實名手機門號</label>
      <div class="fields">
        <fieldset class="fieldset">
          <label for="phone-required" class="field-label">手機號碼 <span class="field-required">必填</span></label>
          <input type="text" id="phone-required" inputmode="number" aria-required="true" class="field-input">
        </fieldset>
      </div>
      
    </div>
  </div>
</fieldset>

CSS

  • input.chcecked--extra-fields:加到 input[type=radio]input[type=checkbox] 後即可在勾選後,顯示後方的 .fields 元件。