CfaFormBuilder

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

Input Field # ◉

Example input

Example input (with prefix and postfix)

/hr

Example input 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="form-group">
<label for="form_example_method_name"><span class="form-question">Example input</span>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="text-input" id="form_example_method_name" name="form[example_method_name]" />
  
</div>

  <div class="form-group">
<label for="form_example_method_name_prefix_postfix"><span class="form-question">Example input (with prefix and postfix)</span>
</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" id="form_example_method_name_prefix_postfix" name="form[example_method_name_prefix_postfix]" /><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"><span class="form-question">Example input with error</span>
</label></div><div class="field_with_errors"><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" aria-describedby="form_example_method_with_validation__errors" type="text" class="text-input" 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_prefix_postfix, '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

Example range (with help text)

Estimate if you are not sure.

Example range with error

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_a"><span class="form-question">Lower amount</span>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="text-input form-width--short" aria-describedby="form_example_method_name_a_example_method_name_b__errors" type="text" name="form[example_method_name_a]" id="form_example_method_name_a" />
    </div>
    <span class="range-text">to</span>
    <div class="form-group">
      <label class="sr-only" for="form_example_method_name_b"><span class="form-question">Upper amount</span>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="text-input form-width--short" aria-describedby="form_example_method_name_a_example_method_name_b__errors" type="text" name="form[example_method_name_b]" id="form_example_method_name_b" />
    </div>
  </div>
  
</fieldset>

  <fieldset class="form-group" aria-describedby="form_example_method_name_c_example_method_name_d__help-text">
  <legend class="form-question ">
  Example range (with help text)
</legend>
<p class="text--help" id="form_example_method_name_c_example_method_name_d__help-text">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_c"><span class="form-question">Lower amount</span>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="text-input form-width--short" aria-describedby="form_example_method_name_c_example_method_name_d__errors" type="text" name="form[example_method_name_c]" id="form_example_method_name_c" />
    </div>
    <span class="range-text">to</span>
    <div class="form-group">
      <label class="sr-only" for="form_example_method_name_d"><span class="form-question">Upper amount</span>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="text-input form-width--short" aria-describedby="form_example_method_name_c_example_method_name_d__errors" type="text" name="form[example_method_name_d]" id="form_example_method_name_d" />
    </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"><span class="form-question">Lower amount</span>
</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_f__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_f"><span class="form-question">Upper amount</span>
</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_f__errors" type="text" name="form[example_method_name_f]" id="form_example_method_name_f" />
    </div>
  </div>
  <span id="form_example_method_with_validation_example_method_name_f__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_a, :example_method_name_b, 'Example range') %>
  <%= f.cfa_range_field(:example_method_name_c, :example_method_name_d, 'Example range (with help text)', help_text: 'Estimate if you are not sure.') %>

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

Text area # ◉

Example textarea

Example textarea with error

HTML ERB

<div class="form-group">
  <label class="" for="form_example_method_name"><span class="form-question">Example textarea</span>
</label><textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="textarea" rows="2" 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"><span class="form-question">Example textarea with error</span>
</label></div><div class="field_with_errors"><textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="textarea" aria-describedby="form_example_method_with_validation__errors" rows="2" 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

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="2025">2025</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
</select>

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


  <fieldset class="form-group form-group--error" aria-describedby="form_example_method_with_validation__errors">
  <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="2025">2025</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</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 Example choice 1 Example choice 2

Checkbox set with error Example choice 1 Example choice 2 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_2]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name_2]" id="form_example_method_name_2" /> Example choice 2
</label>

  
</fieldset>


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

  <label class="checkbox">
  <input name="form[example_method_name_validation]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name_validation]" id="form_example_method_name_validation" /> Example choice 1
</label>
<label class="checkbox">
  <input name="form[example_method_name_validation_2]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name_validation_2]" id="form_example_method_name_validation_2" /> 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_2, label: "Example choice 2" }
    ],
    label_text: "Checkbox set"
  ) %>

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

Checkbox set with none # ◉

Example choice 1 Example choice 2

None of the above

Example choice 1 Example choice 2

Neither

Example choice 1 Example choice 2

None of the above 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_a]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name_a]" id="form_example_method_name_a" /> Example choice 1
</label>
<label class="checkbox">
  <input name="form[example_method_name_b]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_name_b]" id="form_example_method_name_b" /> 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_1[example_method_name_c]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form_1[example_method_name_c]" id="form_1_example_method_name_c" /> Example choice 1
</label>
<label class="checkbox">
  <input name="form_1[example_method_name_d]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form_1[example_method_name_d]" id="form_1_example_method_name_d" /> Example choice 2
</label>

  <hr>
  <label class="checkbox">
    <input name="form_1[none]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" checked="checked" name="form_1[none]" id="form_1_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_2[example_method_name_e]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form_2[example_method_name_e]" id="form_2_example_method_name_e" /> Example choice 1
</label>
<label class="checkbox">
  <input name="form_2[example_method_name_f]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form_2[example_method_name_f]" id="form_2_example_method_name_f" /> Example choice 2
</label>

  <hr>
  <label class="checkbox">
    <input name="form_2[none]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" checked="checked" name="form_2[none]" id="form_2_none" /> None of the above
  </label>
  <span class="text--error" id="form_2_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_1,
    [
      { method: :example_method_name_a, label: "Example choice 1" },
      { method: :example_method_name_b, label: "Example choice 2" }
    ]) %>
<% end %>

<%= fields_for(:form_1, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
    <%= f.cfa_checkbox_set_with_none(
    :example_method_name_2,
    [
      { method: :example_method_name_c, label: "Example choice 1" },
      { method: :example_method_name_d, label: "Example choice 2" }
    ],
    none_text: "Neither") %>
<% end %>

<%= fields_for(:form_2, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
  <%= f.cfa_checkbox_set_with_none(
    :example_method_with_validation,
    [
      { method: :example_method_name_e, label: "Example choice 1" },
      { method: :example_method_name_f, label: "Example choice 2" }
    ]) %>
<% end %>

Radio set # ◉

Example radio set (regular)

Choose 1

Option 1 Option 2

Example radio set with error

Option 1

Option 2

HTML ERB

<fieldset class="form-group" aria-describedby="form_example_method_name__help-text">
  <legend class="form-question ">
  Example radio set (regular)
</legend>
<p class="text--help" id="form_example_method_name__help-text">Choose 1</p>

  <div class="input-group--block honeycrisp-radiogroup">
  <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>

</div>

  
</fieldset>


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

  <div class="input-group--block honeycrisp-radiogroup">
  <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>

</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_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

Yes No

Example input 1

Example input 2

Example radio set with follow up - with error

Yes

Example input 1

Example input 2

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>

  <div class="input-group--block honeycrisp-radiogroup">
  <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>

</div>

  
</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"><span class="form-question">Example input 1</span>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="text-input" 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_two"><span class="form-question">Example input 2</span>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="text-input" id="form_example_method_name_two" name="form[example_method_name_two]" />
  
</div>

</div>

</div>

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

  <div class="input-group--block honeycrisp-radiogroup">
  <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>

</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>

  </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_with_errors"><span class="form-question">Example input 1</span>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="text-input" id="form_example_method_name_with_errors" name="form[example_method_name_with_errors]" />
  
</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_with_errors_two"><span class="form-question">Example input 2</span>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="text-input" id="form_example_method_name_with_errors_two" name="form[example_method_name_with_errors_two]" />
  
</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_two, "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_with_errors, "Example input 1" },
    second_follow_up: ->{ f.cfa_input_field :example_method_name_with_errors_two, "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 # ◉

Example select - with label

Choose your favorite

Example select - with error

Choose your favorite

HTML ERB

<div class="form-group">
  <label class="sr-only" for="form_example_method_name"><span class="form-question has-help">Example select - without label</span>
</label><p class="text--help sr-only" id="form_example_method_name__help-text">Choose your favorite</p>

  <div class="select">
    <select class="select__element" aria-describedby="form_example_method_name__help-text" 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_with_label"><span class="form-question has-help">Example select - with label</span>
</label><p class="text--help" id="form_example_method_name_with_label__help-text">Choose your favorite</p>

  <div class="select">
    <select class="select__element" aria-describedby="form_example_method_name_with_label__help-text" name="form[example_method_name_with_label]" id="form_example_method_name_with_label"><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"><span class="form-question has-help">Example select - with error</span>
</label></div><p class="text--help" id="form_example_method_with_validation__help-text">Choose your favorite</p>

  <div class="select">
    <div class="field_with_errors"><select class="select__element" aria-describedby="form_example_method_with_validation__help-text 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_with_label,
    "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 %>