Aeroporto di Bologna - Design System

Checkbox 

<input type="checkbox" id="subscribeNews" name="subscribe" class="u-visuallyhidden " role="group" aria-label="subscribeNews">

<label for="subscribeNews" class="">
    Iscrivimi alla newsletter<span class="required-marker" aria-hidden="true"> *</span>
</label>
 
<input  type="checkbox" 
        id="{{ id }}" 
        name="{{ name }}"
        class="u-visuallyhidden {{ checkbox-class }}"
        role="group" 
        
        {{#if id}}
          aria-label="{{ id }}" >
        {{/if}}

<label for="{{ id }}" class="{{ class }}">
  {{{ text }}}{{#if required}}<span class="required-marker" aria-hidden="true"> *</span>{{/if}}
  </label>
 
{
  "id": "subscribeNews",
  "name": "subscribe",
  "text": "Iscrivimi alla newsletter",
  "required": "true"
}

Checkbox hack for hide/show

To use checkbox as a toggle for hiding and showing content, apply the class u-chkbx-toggle to the checkbox

<input type="checkbox" id="other" name="other" class="u-visuallyhidden u-chkbx-toggle">

and the class u-chkbx-toggleReceiver to the element you want to show and hide

<div class="u-chkbx-toggleReceiver">
   Content to show
</div>

The CSS rules that defines this beahvior is in: src/sass/07-trumps/_trumps.utilities.scss and can be improved.

Here a complete example code:

<div>
    <input  type="checkbox"  id="other"  name="other"  class="u-visuallyhidden u-chkbx-toggle">
    <div class="u-chkbx-toggleReceiver">
        Content to show
    </div>
</div>

Important: remember to wrap the code in a <div> for a better control.