<!-- Default -->
<div class="field-wrap checkbox-single">
    <label for="myfield">Things here</label>
    <div class="form-entry"><input type="checkbox" id="">
    </div>
</div>

<!-- Inline Help -->
<div class="field-wrap checkbox-single">
    <label for="myfield">Things here</label>

    <div class="form-entry">
        <input type="checkbox" id="">

    </div>
</div>
<p class="inline-help">This is the help text for this field.</p>

<!-- Default -->
<div class="field-wrap checkbox-single">{{render "@label" }} <div class="form-entry">{{ render "@checkbox-field" }}</div></div>

<!-- Inline Help -->
<div class="field-wrap checkbox-single">
	{{render "@label" }} 
	<div class="form-entry">
		{{ render "@checkbox-field" }}
	</div>
</div>
{{ render "@inline-help" }}
/* Default: No context defined */

/* Inline Help: No context defined */

  • Content:
    .checkbox-single > *{
      display: inline-block;
      padding: 0.2em;
    }
    
    .checkbox-single {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    
    .checkbox-single label,
    .form-simple .checkbox-single label {
      order: 2;
      padding-left: ($half-gutter/2);
    }
    
    .checkbox-single .inline-help {
    	display: flex;
    	width: 100%;
    	order: 4;
    }
  • URL: /components/raw/single-checkbox/single-checkbox.scss
  • Filesystem Path: src/components/12-forms/02-molecules/06-single-checkbox/single-checkbox.scss
  • Size: 334 Bytes

There are no notes for this item.