CfaFormBuilder

CfAFormBuilder is a helper that generates accessible form fields for the styleguide.

Input Field # ◉

$
/hr
Translation missing. Options considered were: - en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank - en.activemodel.errors.models.cfa/styleguide/form_example.blank - en.activemodel.errors.messages.blank - en.errors.attributes.example_method_with_validation.blank - en.errors.messages.blank
HTML ERB 
<div class="form-group">
<label for="form_example_method_name"><p class="form-question">Example input</p>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="text-input" aria-describedby="form_example_method_name__errors" id="form_example_method_name" name="form[example_method_name]" />
  
</div>

  <div class="form-group">
<label for="form_example_method_name"><p class="form-question">Example input (with prefix and postfix)</p>
</label>        <div class="text-input-group-container">
          <div class="text-input-group form-width--phone">
            <div class="text-input-group__prefix">$</div><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="form-width--phone text-input" aria-describedby="form_example_method_name__errors" id="form_example_method_name" name="form[example_method_name]" /><div class="text-input-group__postfix">/hr</div>
          </div>
        </div>

  
</div>


  <div class="form-group form-group--error">
<div class="field_with_errors"><label for="form_example_method_with_validation"><p class="form-question">Example input with error</p>
</label></div><div class="field_with_errors"><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="text-input" aria-describedby="form_example_method_with_validation__errors" id="form_example_method_with_validation" name="form[example_method_with_validation]" /></div>
  <span class="text--error" id="form_example_method_with_validation__errors">
  <i class="icon-warning"></i>
  Translation missing. Options considered were:
- en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank
- en.activemodel.errors.models.cfa/styleguide/form_example.blank
- en.activemodel.errors.messages.blank
- en.errors.attributes.example_method_with_validation.blank
- en.errors.messages.blank
</span>

</div>
<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
  <%= f.cfa_input_field(:example_method_name, 'Example input') %>
  <%= f.cfa_input_field(:example_method_name, 'Example input (with prefix and postfix)', prefix: '$', postfix: '/hr', classes: ['form-width--phone']) %>

  <%= f.cfa_input_field(:example_method_with_validation, 'Example input with error') %>
<% end %>

Range Field # ◉

Example range
to
Example range (with help text)

Estimate if you are not sure.

to
Example range with error
to
Translation missing. Options considered were: - en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank - en.activemodel.errors.models.cfa/styleguide/form_example.blank - en.activemodel.errors.messages.blank - en.errors.attributes.example_method_with_validation.blank - en.errors.messages.blank
HTML ERB 
<fieldset class="form-group">
  <legend class="form-question ">
  Example range
</legend>

  <div class="input-group--range">
    <div class="form-group">
      <label class="sr-only" for="form_example_method_name"><p class="form-question">Lower amount</p>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="text-input form-width--short" aria-describedby="form_example_method_name_example_method_name__errors" type="text" name="form[example_method_name]" id="form_example_method_name" />
    </div>
    <span class="range-text">to</span>
    <div class="form-group">
      <label class="sr-only" for="form_example_method_name"><p class="form-question">Upper amount</p>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="text-input form-width--short" aria-describedby="form_example_method_name_example_method_name__errors" type="text" name="form[example_method_name]" id="form_example_method_name" />
    </div>
  </div>
  
</fieldset>

  <fieldset class="form-group">
  <legend class="form-question ">
  Example range (with help text)
</legend>
<p class="text--help">Estimate if you are not sure.</p>

  <div class="input-group--range">
    <div class="form-group">
      <label class="sr-only" for="form_example_method_name"><p class="form-question">Lower amount</p>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="text-input form-width--short" aria-describedby="form_example_method_name_example_method_name__errors" type="text" name="form[example_method_name]" id="form_example_method_name" />
    </div>
    <span class="range-text">to</span>
    <div class="form-group">
      <label class="sr-only" for="form_example_method_name"><p class="form-question">Upper amount</p>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="text-input form-width--short" aria-describedby="form_example_method_name_example_method_name__errors" type="text" name="form[example_method_name]" id="form_example_method_name" />
    </div>
  </div>
  
</fieldset>


  <fieldset class="form-group form-group--error">
  <legend class="form-question ">
  Example range with error
</legend>

  <div class="input-group--range">
    <div class="form-group">
      <div class="field_with_errors"><label class="sr-only" for="form_example_method_with_validation"><p class="form-question">Lower amount</p>
</label></div><div class="field_with_errors"><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="text-input form-width--short" aria-describedby="form_example_method_with_validation_example_method_name__errors" type="text" name="form[example_method_with_validation]" id="form_example_method_with_validation" /></div>
    </div>
    <span class="range-text">to</span>
    <div class="form-group">
      <label class="sr-only" for="form_example_method_name"><p class="form-question">Upper amount</p>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="text-input form-width--short" aria-describedby="form_example_method_with_validation_example_method_name__errors" type="text" name="form[example_method_name]" id="form_example_method_name" />
    </div>
  </div>
  <span id="form_example_method_with_validation_example_method_name__errors" class="text--error">
  <i class="icon-warning"></i>
  Translation missing. Options considered were:
- en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank
- en.activemodel.errors.models.cfa/styleguide/form_example.blank
- en.activemodel.errors.messages.blank
- en.errors.attributes.example_method_with_validation.blank
- en.errors.messages.blank
</span>

</fieldset>
<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
  <%= f.cfa_range_field(:example_method_name, :example_method_name, 'Example range') %>
  <%= f.cfa_range_field(:example_method_name, :example_method_name, 'Example range (with help text)', help_text: 'Estimate if you are not sure.') %>

  <%= f.cfa_range_field(:example_method_with_validation, :example_method_name, 'Example range with error') %>
<% end %>

Text area # ◉

Translation missing. Options considered were: - en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank - en.activemodel.errors.models.cfa/styleguide/form_example.blank - en.activemodel.errors.messages.blank - en.errors.attributes.example_method_with_validation.blank - en.errors.messages.blank
HTML ERB 
<div class="form-group">
  <label class="" for="form_example_method_name"><p class="form-question">Example textarea</p>
</label><textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="textarea" rows="2" aria-describedby="form_example_method_name__errors" name="form[example_method_name]" id="form_example_method_name">
</textarea>
  
</div>


  <div class="form-group form-group--error">
  <div class="field_with_errors"><label class="" for="form_example_method_with_validation"><p class="form-question">Example textarea with error</p>
</label></div><div class="field_with_errors"><textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="textarea" rows="2" aria-describedby="form_example_method_with_validation__errors" name="form[example_method_with_validation]" id="form_example_method_with_validation">
</textarea></div>
  <span class="text--error" id="form_example_method_with_validation__errors">
  <i class="icon-warning"></i>
  Translation missing. Options considered were:
- en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank
- en.activemodel.errors.models.cfa/styleguide/form_example.blank
- en.activemodel.errors.messages.blank
- en.errors.attributes.example_method_with_validation.blank
- en.errors.messages.blank
</span>

</div>
<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
  <%= f.cfa_textarea :example_method_name, 'Example textarea', options: {rows: '2'} %>

  <%= f.cfa_textarea :example_method_with_validation, 'Example textarea with error', options: {rows: '2'} %>
<% end %>

Date select # ◉

Example date select
Example date select with error
Translation missing. Options considered were: - en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank - en.activemodel.errors.models.cfa/styleguide/form_example.blank - en.activemodel.errors.messages.blank - en.errors.attributes.example_method_with_validation.blank - en.errors.messages.blank
HTML ERB 
<fieldset class="form-group">
  <legend class="form-question ">
  Example date select
</legend>

  <div class="input-group--inline">
    <div class="select">
      <label for="form_example_method_name_month" class="sr-only">Month</label>
      <select id="form_example_method_name_month" name="form[example_method_name_month]" class="select__element">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

    </div>
    <div class="select">
      <label for="form_example_method_name_day" class="sr-only">Day</label>
       <select id="form_example_method_name_day" name="form[example_method_name_day]" class="select__element">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

    </div>
    <div class="select">
      <label for="form_example_method_name_year" class="sr-only">Year</label>
      <select id="form_example_method_name_year" name="form[example_method_name_year]" class="select__element">
<option value="">Year</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
</select>

    </div>
  </div>
  
</fieldset>


  <fieldset class="form-group form-group--error">
  <legend class="form-question ">
  Example date select with error
</legend>

  <div class="input-group--inline">
    <div class="select">
      <label for="form_example_method_with_validation_month" class="sr-only">Month</label>
      <select id="form_example_method_with_validation_month" name="form[example_method_with_validation_month]" class="select__element">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

    </div>
    <div class="select">
      <label for="form_example_method_with_validation_day" class="sr-only">Day</label>
       <select id="form_example_method_with_validation_day" name="form[example_method_with_validation_day]" class="select__element">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

    </div>
    <div class="select">
      <label for="form_example_method_with_validation_year" class="sr-only">Year</label>
      <select id="form_example_method_with_validation_year" name="form[example_method_with_validation_year]" class="select__element">
<option value="">Year</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
</select>

    </div>
  </div>
  <span class="text--error" id="form_example_method_with_validation__errors">
  <i class="icon-warning"></i>
  Translation missing. Options considered were:
- en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank
- en.activemodel.errors.models.cfa/styleguide/form_example.blank
- en.activemodel.errors.messages.blank
- en.errors.attributes.example_method_with_validation.blank
- en.errors.messages.blank
</span>

</fieldset>
<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
  <%= f.cfa_date_select(
    :example_method_name,
    'Example date select',
    options: {
      start_year: Time.now.year,
      end_year: Time.now.year - 3,
    }
  ) %>

  <%= f.cfa_date_select(
    :example_method_with_validation,
    'Example date select with error',
    options: {
      start_year: Time.now.year,
      end_year: Time.now.year - 3,
    }
  ) %>
<% end %>

Checkbox set # ◉

Checkbox set
Checkbox set with error Translation missing. Options considered were: - en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank - en.activemodel.errors.models.cfa/styleguide/form_example.blank - en.activemodel.errors.messages.blank - en.errors.attributes.example_method_with_validation.blank - en.errors.messages.blank
HTML ERB 
<fieldset class="input-group form-group">
  <legend class="form-question ">
  Checkbox set
</legend>

  <label class="checkbox">
  <input name="form[example_method_name]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name]" id="form_example_method_name" /> Example choice 1
</label>
<label class="checkbox">
  <input name="form[example_method_name]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name]" id="form_example_method_name" /> Example choice 2
</label>

  
</fieldset>


  <fieldset class="input-group form-group form-group--error">
  <legend class="form-question ">
  Checkbox set with error
</legend>

  <label class="checkbox">
  <input name="form[example_method_name]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name]" id="form_example_method_name" /> Example choice 1
</label>
<label class="checkbox">
  <input name="form[example_method_name]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name]" id="form_example_method_name" /> Example choice 2
</label>

  <span class="text--error" id="form_example_method_with_validation__errors">
  <i class="icon-warning"></i>
  Translation missing. Options considered were:
- en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank
- en.activemodel.errors.models.cfa/styleguide/form_example.blank
- en.activemodel.errors.messages.blank
- en.errors.attributes.example_method_with_validation.blank
- en.errors.messages.blank
</span>

</fieldset>
<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
  <%= f.cfa_checkbox_set(
    :example_method_name,
    [
      { method: :example_method_name, label: "Example choice 1" },
      { method: :example_method_name, label: "Example choice 2" }
    ],
    label_text: "Checkbox set"
  ) %>

  <%= f.cfa_checkbox_set(
    :example_method_with_validation,
    [
      { method: :example_method_name, label: "Example choice 1" },
      { method: :example_method_name, label: "Example choice 2" }
    ],
    label_text: "Checkbox set with error"
  ) %>
<% end %>

Checkbox set with none # ◉

Translation missing. Options considered were: - en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank - en.activemodel.errors.models.cfa/styleguide/form_example.blank - en.activemodel.errors.messages.blank - en.errors.attributes.example_method_with_validation.blank - en.errors.messages.blank
HTML ERB 
<fieldset class="input-group form-group checkbox-none">
  <legend class="sr-only">
    
  </legend>
  <label class="checkbox">
  <input name="form[example_method_name]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name]" id="form_example_method_name" /> Example choice 1
</label>
<label class="checkbox">
  <input name="form[example_method_name]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name]" id="form_example_method_name" /> Example choice 2
</label>

  <hr>
  <label class="checkbox">
    <input name="form[none]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" checked="checked" name="form[none]" id="form_none" /> None of the above
  </label>
  
</fieldset>


    <fieldset class="input-group form-group checkbox-none">
  <legend class="sr-only">
    
  </legend>
  <label class="checkbox">
  <input name="form[example_method_name]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name]" id="form_example_method_name" /> Example choice 1
</label>
<label class="checkbox">
  <input name="form[example_method_name]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name]" id="form_example_method_name" /> Example choice 2
</label>

  <hr>
  <label class="checkbox">
    <input name="form[none]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" checked="checked" name="form[none]" id="form_none" /> Neither
  </label>
  
</fieldset>


  <fieldset class="input-group form-group form-group--error checkbox-none">
  <legend class="sr-only">
    
  </legend>
  <label class="checkbox">
  <input name="form[example_method_name]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name]" id="form_example_method_name" /> Example choice 1
</label>
<label class="checkbox">
  <input name="form[example_method_name]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name]" id="form_example_method_name" /> Example choice 2
</label>

  <hr>
  <label class="checkbox">
    <input name="form[none]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" checked="checked" name="form[none]" id="form_none" /> None of the above
  </label>
  <span class="text--error" id="form_example_method_with_validation__errors">
  <i class="icon-warning"></i>
  Translation missing. Options considered were:
- en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank
- en.activemodel.errors.models.cfa/styleguide/form_example.blank
- en.activemodel.errors.messages.blank
- en.errors.attributes.example_method_with_validation.blank
- en.errors.messages.blank
</span>

</fieldset>
<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
  <%= f.cfa_checkbox_set_with_none(
    :example_method_name,
    [
      { method: :example_method_name, label: "Example choice 1" },
      { method: :example_method_name, label: "Example choice 2" }
    ]) %>

    <%= f.cfa_checkbox_set_with_none(
    :example_method_name,
    [
      { method: :example_method_name, label: "Example choice 1" },
      { method: :example_method_name, label: "Example choice 2" }
    ],
    none_text: "Neither") %>

  <%= f.cfa_checkbox_set_with_none(
    :example_method_with_validation,
    [
      { method: :example_method_name, label: "Example choice 1" },
      { method: :example_method_name, label: "Example choice 2" }
    ]) %>
<% end %>

Radio set # ◉

Example radio set (regular)

Choose 1

Example radio set with error Translation missing. Options considered were: - en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank - en.activemodel.errors.models.cfa/styleguide/form_example.blank - en.activemodel.errors.messages.blank - en.errors.attributes.example_method_with_validation.blank - en.errors.messages.blank
HTML ERB 
<fieldset class="form-group">
  <legend class="form-question ">
  Example radio set (regular)
</legend>
<p class="text--help">Choose 1</p>

<radiogroup class="input-group--block" aria-describedby="form_example_method_name__errors">
        <label class="radio-button">
  <input type="radio" value="option1" name="form[example_method_name]" id="form_example_method_name_option1" />
  Option 1
</label>
<label class="radio-button">
  <input type="radio" value="option2" name="form[example_method_name]" id="form_example_method_name_option2" />
  Option 2
</label>

            </radiogroup>


</fieldset>


  <fieldset class="form-group form-group--error">
  <legend class="form-question ">
  Example radio set with error
</legend>

<radiogroup class="input-group--block" aria-describedby="form_example_method_with_validation__errors">
        <label class="radio-button">
  <div class="field_with_errors"><input type="radio" value="option1" name="form[example_method_with_validation]" id="form_example_method_with_validation_option1" /></div>
  Option 1
</label>
<label class="radio-button">
  <div class="field_with_errors"><input type="radio" value="option2" name="form[example_method_with_validation]" id="form_example_method_with_validation_option2" /></div>
  Option 2
</label>

            </radiogroup>

<span class="text--error" id="form_example_method_with_validation__errors">
  <i class="icon-warning"></i>
  Translation missing. Options considered were:
- en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank
- en.activemodel.errors.models.cfa/styleguide/form_example.blank
- en.activemodel.errors.messages.blank
- en.errors.attributes.example_method_with_validation.blank
- en.errors.messages.blank
</span>

</fieldset>
<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
  <%= f.cfa_radio_set(
    :example_method_name,
    label_text: "Example radio set (regular)",
    help_text: "Choose 1",
    collection: [
      { value: :option1, label: "Option 1" },
      { value: :option2, label: "Option 2" },
    ]
  )
  %>

  <%= f.cfa_radio_set(
    :example_method_with_validation,
    label_text: "Example radio set with error",
    collection: [
      { value: :option1, label: "Option 1" },
      { value: :option2, label: "Option 2" },
    ]
  )
  %>
<% end %>

Radio set with follow up # ◉

Example radio set with follow up
Example radio set with follow up - with error Translation missing. Options considered were: - en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank - en.activemodel.errors.models.cfa/styleguide/form_example.blank - en.activemodel.errors.messages.blank - en.errors.attributes.example_method_with_validation.blank - en.errors.messages.blank
HTML ERB 
<div class="question-with-follow-up">
  <div class="question-with-follow-up__question">
    <fieldset class="form-group">
  <legend class="form-question ">
  Example radio set with follow up
</legend>

<radiogroup class="input-group--block" aria-describedby="form_example_method_name__errors">
        <label class="radio-button">
  <input data-follow-up="#example_method_name-first-follow-up" type="radio" value="yes" name="form[example_method_name]" id="form_example_method_name_yes" />
  Yes
</label>
<label class="radio-button">
  <input data-follow-up="#example_method_name-second-follow-up" type="radio" value="no" name="form[example_method_name]" id="form_example_method_name_no" />
  No
</label>

            </radiogroup>


</fieldset>

  </div>
  <div class="question-with-follow-up__follow-up" id="example_method_name-first-follow-up">
  <div class="form-group">
<label for="form_example_method_name"><p class="form-question">Example input 1</p>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="text-input" aria-describedby="form_example_method_name__errors" id="form_example_method_name" name="form[example_method_name]" />
  
</div>

</div>
<div class="question-with-follow-up__follow-up" id="example_method_name-second-follow-up">
  <div class="form-group">
<label for="form_example_method_name"><p class="form-question">Example input 2</p>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="text-input" aria-describedby="form_example_method_name__errors" id="form_example_method_name" name="form[example_method_name]" />
  
</div>

</div>

</div>

  <div class="question-with-follow-up">
  <div class="question-with-follow-up__question">
    <fieldset class="form-group form-group--error">
  <legend class="form-question ">
  Example radio set with follow up - with error
</legend>

<radiogroup class="input-group--block" aria-describedby="form_example_method_with_validation__errors">
        <label class="radio-button">
  <div class="field_with_errors"><input data-follow-up="#example_method_with_validation-first-follow-up" type="radio" value="yes" name="form[example_method_with_validation]" id="form_example_method_with_validation_yes" /></div>
  Yes
</label>
<label class="radio-button">
  <div class="field_with_errors"><input data-follow-up="#example_method_with_validation-second-follow-up" type="radio" value="no" name="form[example_method_with_validation]" id="form_example_method_with_validation_no" /></div>
  No
</label>

            </radiogroup>

<span class="text--error" id="form_example_method_with_validation__errors">
  <i class="icon-warning"></i>
  Translation missing. Options considered were:
- en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank
- en.activemodel.errors.models.cfa/styleguide/form_example.blank
- en.activemodel.errors.messages.blank
- en.errors.attributes.example_method_with_validation.blank
- en.errors.messages.blank
</span>

</fieldset>

  </div>
  <div class="question-with-follow-up__follow-up" id="example_method_with_validation-first-follow-up">
  <div class="form-group">
<label for="form_example_method_name"><p class="form-question">Example input 1</p>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="text-input" aria-describedby="form_example_method_name__errors" id="form_example_method_name" name="form[example_method_name]" />
  
</div>

</div>
<div class="question-with-follow-up__follow-up" id="example_method_with_validation-second-follow-up">
  <div class="form-group">
<label for="form_example_method_name"><p class="form-question">Example input 2</p>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="text-input" aria-describedby="form_example_method_name__errors" id="form_example_method_name" name="form[example_method_name]" />
  
</div>

</div>

</div>
<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
  <%= f.cfa_radio_set_with_follow_up(
    :example_method_name,
    label_text: "Example radio set with follow up",
    collection: [
      { value: :yes, label: "Yes" },
      { value: :no, label: "No" },
    ],
    first_follow_up: ->{ f.cfa_input_field :example_method_name, "Example input 1" },
    second_follow_up: ->{ f.cfa_input_field :example_method_name, "Example input 2" }
  )
  %>
  <%= f.cfa_radio_set_with_follow_up(
    :example_method_with_validation,
    label_text: "Example radio set with follow up - with error",
    collection: [
      { value: :yes, label: "Yes" },
      { value: :no, label: "No" },
    ],
    first_follow_up: ->{ f.cfa_input_field :example_method_name, "Example input 1" },
    second_follow_up: ->{ f.cfa_input_field :example_method_name, "Example input 2" }
  )
  %>
<% end %>

Single tap button # ◉

HTML ERB 
<button name="form[example_method_name]" type="submit" value="true" class="button">Yes</button>
  <button name="form[example_method_name]" type="submit" value="false" class="button">No</button>
  <button name="form[example_method_name]" type="submit" value="shrug" class="button">Maybe</button>
<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
  <%= f.cfa_single_tap_button(
    :example_method_name,
    "Yes",
    true
  ) %>
  <%= f.cfa_single_tap_button(
    :example_method_name,
    "No",
    false
  ) %>
  <%= f.cfa_single_tap_button(
    :example_method_name,
    "Maybe",
    :shrug
  ) %>
<% end %>

Select # ◉

Translation missing. Options considered were: - en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank - en.activemodel.errors.models.cfa/styleguide/form_example.blank - en.activemodel.errors.messages.blank - en.errors.attributes.example_method_with_validation.blank - en.errors.messages.blank
HTML ERB 
<div class="form-group">
  <label class="sr-only" for="form_example_method_name"><p class="form-question">Example select - without label</p>
<p class="text--help">Choose your favorite</p>
</label>
  <div class="select">
    <select class="select__element" aria-describedby="form_example_method_name__errors" name="form[example_method_name]" id="form_example_method_name"><option value="blue">Blue</option>
<option value="green">Green</option></select>
  </div>
  
</div>

  <div class="form-group">
  <label class="" for="form_example_method_name"><p class="form-question">Example select - with label</p>
<p class="text--help">Choose your favorite</p>
</label>
  <div class="select">
    <select class="select__element" aria-describedby="form_example_method_name__errors" name="form[example_method_name]" id="form_example_method_name"><option value="blue">Blue</option>
<option value="green">Green</option></select>
  </div>
  
</div>

  <div class="form-group form-group--error">
  <div class="field_with_errors"><label class="" for="form_example_method_with_validation"><p class="form-question">Example select - with error</p>
<p class="text--help">Choose your favorite</p>
</label></div>
  <div class="select">
    <div class="field_with_errors"><select class="select__element" aria-describedby="form_example_method_with_validation__errors" name="form[example_method_with_validation]" id="form_example_method_with_validation"><option value="blue">Blue</option>
<option value="green">Green</option></select></div>
  </div>
  <span class="text--error" id="form_example_method_with_validation__errors">
  <i class="icon-warning"></i>
  Translation missing. Options considered were:
- en.activemodel.errors.models.cfa/styleguide/form_example.attributes.example_method_with_validation.blank
- en.activemodel.errors.models.cfa/styleguide/form_example.blank
- en.activemodel.errors.messages.blank
- en.errors.attributes.example_method_with_validation.blank
- en.errors.messages.blank
</span>

</div>
<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
  <%= f.cfa_select(
    :example_method_name,
    "Example select - without label",
    [
    ["Blue", :blue],
    ["Green", :green],
    ],
    hide_label: true,
    help_text: "Choose your favorite",
    ) %>
  <%= f.cfa_select(
    :example_method_name,
    "Example select - with label",
    [
      ["Blue", :blue],
      ["Green", :green],
    ],
    help_text: "Choose your favorite",
  ) %>
  <%= f.cfa_select(
    :example_method_with_validation,
    "Example select - with error",
    [
      ["Blue", :blue],
      ["Green", :green],
    ],
    help_text: "Choose your favorite",
  ) %>
<% end %>