基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

選擇控制項

選擇控制項包括核取方塊、單選按鈕和切換開關。

呼叫方式

選擇控制項使用純 CSS 編寫，只需編寫 HTML 程式碼即可生效。

色彩

使用強調色。

樣式

核取方塊

範例

<label class="mdui-checkbox">
  <input type="checkbox"/>
  <i class="mdui-checkbox-icon"></i>
  預設不選取
</label>

<label class="mdui-checkbox">
  <input type="checkbox" checked/>
  <i class="mdui-checkbox-icon"></i>
  預設選取
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled/>
  <i class="mdui-checkbox-icon"></i>
  停用，且不選取
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled checked/>
  <i class="mdui-checkbox-icon"></i>
  停用，且選取
</label>

<label class="mdui-checkbox">
  <input type="checkbox" id="indeterminate-demo1"/>
  <i class="mdui-checkbox-icon"></i>
  不確定狀態
</label>
<script>
  // indeterminate 屬性只能透過 JavaScript 設定
  document.getElementById('indeterminate-demo1').indeterminate = true;
</script>

<label class="mdui-checkbox">
  <input type="checkbox" disabled id="indeterminate-demo2"/>
  <i class="mdui-checkbox-icon"></i>
  停用，且不確定狀態
</label>
<script>
  document.getElementById('indeterminate-demo2').indeterminate = true;
</script>

單選按鈕

範例

<form>

  <label class="mdui-radio">
    <input type="radio" name="group1"/>
    <i class="mdui-radio-icon"></i>
    預設不選取
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" checked/>
    <i class="mdui-radio-icon"></i>
    預設選取
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" disabled/>
    <i class="mdui-radio-icon"></i>
    停用，且不選取
  </label>

</form>

<form>
  <label class="mdui-radio">
    <input type="radio" name="group1" disabled checked/>
    <i class="mdui-radio-icon"></i>
    停用，且選取
  </label>
</form>

切換開關

範例

<label class="mdui-switch">
  <input type="checkbox"/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" checked/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled checked/>
  <i class="mdui-switch-icon"></i>
</label>

CSS 類別清單

類別名稱	說明
`.mdui-checkbox`	定義核取方塊。
`.mdui-checkbox-icon`	定義核取方塊內的圖示。
`.mdui-radio`	定義單選按鈕。
`.mdui-radio-icon`	定義單選按鈕內的圖示。
`.mdui-switch`	定義切換開關。
`.mdui-switch-icon`	定義切換開關內的圖示。

文字欄位

滑桿

選擇控制項

呼叫方式

色彩

相關閱讀

樣式

核取方塊

單選按鈕

切換開關

CSS 類別清單