Skip to content
Toyota Motor Europe DXP Reference Guide

Checkbox

<label class="tng-checkbox-control tng-focus-within">
  <input type="checkbox" />
  Default
</label>
<label class="tng-checkbox-control tng-focus-within">
  <input type="checkbox" checked />
  Checked
</label>
<label class="tng-checkbox-control tng-focus-within">
  <input type="checkbox" disabled />
  Disabled
</label>
<label class="tng-checkbox-control tng-focus-within">
  <input type="checkbox" checked disabled />
  Checked & Disabled
</label>

Recipes

Section titled “Recipes”

Checkbox List

Section titled “Checkbox List”
<div
  class="tng-surface border-xs | tng-overflow-scroll"
  style="max-block-size: 150px"
>
  <div class="tng-surface p-md | tng-stack align-items-stretch gap-xl">
    <label class="tng-checkbox-control | tng-focus-within">
      <input type="checkbox" />
      Option 1
    </label>
    <label class="tng-checkbox-control | tng-focus-within">
      <input type="checkbox" />
      Option 2
    </label>
    <label class="tng-checkbox-control | tng-focus-within">
      <input type="checkbox" />
      Option 3
    </label>
    <label class="tng-checkbox-control | tng-focus-within">
      <input type="checkbox" />
      Option 4
    </label>
    <label class="tng-checkbox-control | tng-focus-within">
      <input type="checkbox" />
      Option 5
    </label>
    <label class="tng-checkbox-control | tng-focus-within">
      <input type="checkbox" checked />
      Option 6
    </label>
  </div>
</div>
<div class="tng-surface p-md | tng-group justify-content-end gap-xl">
  <button class="tng-button is-tertiary">Clear All</button>
  <button class="tng-button is-primary">Show x results</button>
</div>