Foehn Design System

Checkbox 

<!-- Default -->
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="exampleOption1">
    <label class="form-check-label" for="exampleOption1">
        Consectetur adipisicing elit
    </label>
</div>


<!-- Disabled -->
<div class="form-check disabled">
    <input class="form-check-input" type="checkbox" value="" id="exampleOption2" disabled>
    <label class="form-check-label" for="exampleOption2">
        Option is disabled
    </label>
</div>


<div class="form-check{% if validation.class %} has-{{ validation.class }}{% endif %}{% if disabled %} disabled{% endif %}{% if styleModifier %} {{ styleModifier }}{% endif %}">
  <input class="form-check-input"
          type="checkbox"
          value="{{ value }}"
          {%- if id %} id="{{ id }}"{% endif -%}
          {%- if name %} name="{{ name }}"{% endif -%}
          {%- if checked %} checked{% endif -%}
          {%- if disabled %} disabled{% endif %} >
  <label class="form-check-label" for="{{ id }}">
    {{ label }}
  </label>
</div>
 
/* Default */
{
  "label": "Consectetur adipisicing elit",
  "id": "exampleOption1"
}


/* Disabled */
{
  "label": "Option is disabled",
  "id": "exampleOption2",
  "disabled": true
}
  • Content: 
    @charset 'UTF-8';

/**
 * Add a focus style on checkbox
 *
 * The same style apply for radio buttons
 */

.form-check-input:focus {
  @include vd-focus;
}
  • URL: /components/raw/checkbox/checkbox.scss
  • Filesystem Path: src/components/02-molecules/form/checkbox/checkbox.scss
  • Size: 155 Bytes

No notes defined.