Aeroporto di Bologna - Design System

Radio button: Error 

<input type="radio" id="radio-choice" name="choice" value="yes" class="js-fr-dialogmodal-open u-visuallyhidden" aria-controls="dialog-button">
<label class="is-negative" for="radio-choice">Radio label text</label>
 
<input
      type="radio" 
      id="{{ id }}" 
      name="{{ name }}" 
      value="{{ value }}" 
      class="{{ input-class }} u-visuallyhidden"
      
      {{#if checked }}
        checked="true"
      {{/if}}

      {{#if data-toggle }}
        data-toggle="{{ data-toggle }}"
      {{/if}}
      
      {{#if aria-controls }}
        aria-controls="{{ aria-controls }}"
      {{/if}}

      {{#if onclick }}
        onclick="{{ onclick }}"
      {{/if}}
      >
<label class="{{ label-class }}" for="{{ id }}">{{{ text }}}</label>
 
{
  "id": "radio-choice",
  "name": "choice",
  "value": "yes",
  "text": "Radio label text",
  "input-class": "js-fr-dialogmodal-open",
  "aria-controls": "dialog-button",
  "label-class": "is-negative"
}
  • Handle: @radiobutton--error
  • Preview:
  • Filesystem Path: src/views/01-atoms/form-elements/radiobutton/radiobutton.hbs

Radio hack for hide/show

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

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

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

<div class="u-radio-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="radio" id="other" name="other" class="u-visuallyhidden u-radio-toggle">
    <div class="u-radio-toggleReceiver">
        Content to show
    </div>
</div>

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