Foehn Design System

Radio 

<!-- Default -->
<div class="form-check">
    <input class="form-check-input" type="radio" value="option1" id="exampleOption1" name="exampleOptions">
    <label class="form-check-label" for="exampleOption1">
        This is an option
    </label>
</div>


<!-- Disabled Option -->
<div class="form-check disabled">
    <input class="form-check-input" type="radio" value="option1" id="exampleOption2" name="exampleOptions" 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="radio"
         {%- if value %} value="{{ value }}"{% endif %}
         {%- 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": "This is an option",
  "name": "exampleOptions",
  "id": "exampleOption1",
  "value": "option1"
}


/* Disabled Option */
{
  "label": "Option is disabled",
  "name": "exampleOptions",
  "id": "exampleOption2",
  "value": "option1",
  "disabled": true
}

No notes defined.