選択コントロール

選択コントロールには、チェックボックス、ラジオボタン、スイッチが含まれます。

使用方法

選択コントロールは純粋な 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 クラス一覧