<p class="checkbox-header">Vertical Group</p>
<div class="vertical-group">
    <label><input type="checkbox" name="checkbox" id="checkbox1">Option 1</label>
    <label><input type="checkbox" name="checkbox" id="checkbox2">Option 2</label>
    <label><input type="checkbox" name="checkbox" id="checkbox3">Option 3</label>
    <label><input type="checkbox" name="checkbox" id="checkbox4">Option 4</label>
    <label><input type="checkbox" name="checkbox" id="checkbox5">Option 5</label>
</div>
  • Content:
    body {
      font-family: 'Helvetica Neue';
      font-size: 18px;
    }
    
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    
    label {
      color: var(--text-color);
      font-size: 18px;
      display: inline-block;
      margin: .375em;
    }
    
    input[type="radio"], input[type="checkbox"] {
      display: inline-block;
      margin: 0 .33em 0 0;
      accent-color: var(--purple-800-brand);
    }
    
    input[type="radio"]:disabled, input[type="checkbox"]:disabled {
      cursor: not-allowed;
    }
    
    input[type="radio"]:focus, input[type="checkbox"]:focus {
      outline-color: var(--purple-800-brand);
    }
    
    .radio-header, .checkbox-header {
      margin: .5em 0 0;
      color: var(--gray-800);
    }
    
    .horizontal-group label {
      margin: .375em;
    }
    
    .vertical-group label {
      display: block;
    }
    
    select {
      display: block;
      color: var(--text-color);
      border-color: var(--text-color);
      border-radius: 6px;
      font-size: 18px;
      padding: .25em 1em .25em .25em;
    }
    
    select:hover {
      border-color: var(--gray-800);
    }
    
    select:focus{
      border-color: var(--purple-800-brand);
    }
    
    select:focus-visible {
      outline-color: var(--purple-800-brand);
    }
    
    select:disabled {
      cursor: not-allowed;
      border: none;
      background-color: var(--disabled-color);
      opacity: 75%;
    }
  • URL: /components/raw/checkbox/selectables.css
  • Filesystem Path: components/02-components/checkbox/selectables.css
  • Size: 1.2 KB

Usage Guidelines

  • Primarily for use in forms, checkboxes are used to collect input from users
  • Keep checkbox labels short and descriptive
  • Start all checkbox labels with a capital letter
  • Don’t include punctuation after checkbox labels
  • Can only use a single checkbox if user is accepting something (i.e. terms of service)