表單

輸入框 .lct-input

單行文字輸入，聚焦時邊框變主色並帶淡光暈。

<input class="lct-input" type="text" placeholder="新建收藏夾名稱">

搭配標題與輔助文字：

<label class="lct-subtitle" for="name">收藏夾名稱</label>
<input class="lct-input" id="name" type="text" placeholder="例如：客廳提案">
<p class="lct-caption">建立後會立即把目前材質加入此收藏夾。</p>

Checkbox .lct-checkbox

自訂樣式的核取方塊。用 <label class="lct-checkbox"> 包住原生 <input type="checkbox"> 與 .lct-checkbox__box。

<label class="lct-checkbox">
  <input type="checkbox">
  <span class="lct-checkbox__box"></span>
  <span>全選</span>
</label>

勾選後方塊會變紅並顯示白色勾勾。原生 <input> 仍在（只是視覺隱藏），所以表單提交、checked 狀態、鍵盤操作都正常運作。

預設勾選：

<label class="lct-checkbox">
  <input type="checkbox" checked>
  <span class="lct-checkbox__box"></span>
  <span>套用到所有同名材質</span>
</label>

搜尋輸入

搜尋框請見「導覽與版面 — 搜尋列」的 .lct-search。