Checkbox

• Docs
• Configurator

Checkbox.

Basic example

Checkbox example

<div class="vscode-checkbox">
  <input type="checkbox" id="checkbox-1">
  <label for="checkbox-1">
    <span class="icon">
      <i class="codicon codicon-check icon-checked"></i>
      <i class="codicon codicon-chrome-minimize icon-indeterminate"></i>
    </span>
    <span class="text">
      Checkbox example
    </span>
  </label>
</div>

Indeterminate checkbox

Indeterminated state is applied on checkbox. MDN Reference

Indeterminate checkbox

HTML

<div class="vscode-checkbox">
  <input type="checkbox" id="checkbox-2">
  <label for="checkbox-2">
    <span class="icon">
      <i class="codicon codicon-check icon-checked"></i>
      <i class="codicon codicon-chrome-minimize icon-indeterminate"></i>
    </span>
    <span class="text">
      Indeterminate checkbox
    </span>
  </label>
</div>

JavaScript

document.querySelector("#checkbox-2").indeterminate = true;

Invalid checkbox

Checkbox example

<div class="vscode-checkbox">
  <input type="checkbox" id="checkbox-3" required>
  <label for="checkbox-3">
    <span class="icon">
      <i class="codicon codicon-check icon-checked"></i>
      <i class="codicon codicon-chrome-minimize icon-indeterminate"></i>
    </span>
    <span class="text">
      Checkbox example
    </span>
  </label>
</div>

Checkbox group

Multiple checkboxes can be grouped together. The default layout is horizontal.

Lorem

Ipsum

Dolor

<div class="vscode-checkbox-group">
  <div class="vscode-checkbox">
    <input type="checkbox" id="group-1-checkbox-1">
    <label for="group-1-checkbox-1">
      <span class="icon">
        <i class="codicon codicon-check icon-checked"></i>
        <i class="codicon codicon-chrome-minimize icon-indeterminate"></i>
      </span>
      <span class="text">Lorem</span>
    </label>
  </div>
  <div class="vscode-checkbox">
    <input type="checkbox" id="group-1-checkbox-2">
    <label for="group-1-checkbox-2">
      <span class="icon">
        <i class="codicon codicon-check icon-checked"></i>
        <i class="codicon codicon-chrome-minimize icon-indeterminate"></i>
      </span>
      <span class="text">Ipsum</span>
    </label>
  </div>
  <div class="vscode-checkbox">
    <input type="checkbox" id="group-1-checkbox-3">
    <label for="group-1-checkbox-3">
      <span class="icon">
        <i class="codicon codicon-check icon-checked"></i>
        <i class="codicon codicon-chrome-minimize icon-indeterminate"></i>
      </span>
      <span class="text">Dolor</span>
    </label>
  </div>
</div>

Vertical checkbox group

Lorem

Ipsum

Dolor

<div class="vscode-checkbox-group vertical">
  <div class="vscode-checkbox">
    <input type="checkbox" id="group-2-checkbox-1">
    <label for="group-2-checkbox-1">
      <span class="icon">
        <i class="codicon codicon-check icon-checked"></i>
        <i class="codicon codicon-chrome-minimize icon-indeterminate"></i>
      </span>
      <span class="text">Lorem</span>
    </label>
  </div>
  <div class="vscode-checkbox">
    <input type="checkbox" id="group-2-checkbox-2">
    <label for="group-2-checkbox-2">
      <span class="icon">
        <i class="codicon codicon-check icon-checked"></i>
        <i class="codicon codicon-chrome-minimize icon-indeterminate"></i>
      </span>
      <span class="text">Ipsum</span>
    </label>
  </div>
  <div class="vscode-checkbox">
    <input type="checkbox" id="group-2-checkbox-3">
    <label for="group-2-checkbox-3">
      <span class="icon">
        <i class="codicon codicon-check icon-checked"></i>
        <i class="codicon codicon-chrome-minimize icon-indeterminate"></i>
      </span>
      <span class="text">Dolor</span>
    </label>
  </div>
</div>