CfaV2FormBuilder

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

Text Field # ◉

Example input

Example input with help text

You could answer this any way you like.

Example input with label options

Example input with wrapper options

Example input with input options

Example input - required with error

This is an example error message.

HTML ERB

<div class="cfa-text-field form-group"><label class="form-question" for="form_example_method_text_a">Example input<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="text-input" type="text" name="form[example_method_text_a]" id="form_example_method_text_a" /></div>

  <div class="cfa-text-field form-group"><label class="form-question" for="form_example_method_text_b">Example input with help text<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</label><div class="text--help" id="form_example_method_text_b__help-text">
  You could answer this any way you like.
</div>
<input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" aria-describedby="form_example_method_text_b__help-text" class="text-input" type="text" name="form[example_method_text_b]" id="form_example_method_text_b" /></div>

  <div class="cfa-text-field form-group"><label class="label-class form-question" data-spec="label" for="form_example_method_text_c">Example input with label options<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="text-input" type="text" name="form[example_method_text_c]" id="form_example_method_text_c" /></div>

  <div class="wrapper-class cfa-text-field form-group" data-spec="wrapper"><label class="form-question" for="form_example_method_text_d">Example input with wrapper options<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="text-input" type="text" name="form[example_method_text_d]" id="form_example_method_text_d" /></div>

  <div class="cfa-text-field form-group"><label class="form-question" for="form_example_method_text_e">Example input with input options<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</label><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Enter text here." class="form-width--long text-input" type="text" name="form[example_method_text_e]" id="form_example_method_text_e" /></div>

  <div class="cfa-text-field form-group"><label class="form-question" for="form_example_method_with_validation_text">Example input - required with error</label><div class="field_with_errors"><input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required="required" class="text-input" type="text" name="form[example_method_with_validation_text]" id="form_example_method_with_validation_text" /></div></div>

<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %>
  <%= f.cfa_text_field(:example_method_text_a, 'Example input') %>

  <%= f.cfa_text_field(:example_method_text_b,
                       'Example input with help text',
                       help_text: "You could answer this any way you like.") %>

  <%= f.cfa_text_field(:example_method_text_c,
                       'Example input with label options',
                       label_options: {
                           class: 'label-class',
                           data: {spec: 'label'}
                       }) %>

  <%= f.cfa_text_field(:example_method_text_d,
                       'Example input with wrapper options',
                       wrapper_options: {
                           class: 'wrapper-class',
                           data: {spec: 'wrapper'}
                       }) %>

  <%= f.cfa_text_field(:example_method_text_e,
                       'Example input with input options',
                       placeholder: 'Enter text here.',
                       class: 'form-width--long') %>

  <%= f.cfa_text_field(:example_method_with_validation_text,
                       'Example input - required with error',
                       required: true) %>
<% end %>

Button # ◉

HTML ERB

<div class="cfa-button"><button name="button" type="submit" class="button button--primary">Continue</button></div>
  <div class="my-wrapper cfa-button"><button name="button" type="submit" class="button button--primary">Continue</button></div>
  <div class="cfa-button"><button name="button" type="submit" class="button button--secondary">Continue</button></div>

<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %>
  <%= f.cfa_button('Continue') %>
  <%= f.cfa_button('Continue', wrapper_options: { class: 'my-wrapper' }) %>
  <%= f.cfa_button('Continue', class: 'button button--secondary') %>
<% end %>

Select # ◉

Example select

Example select - with html-impacting options

Example select - required and with blank option

This is an example error message.

HTML ERB

<div class="cfa-select form-group"><label class="form-question" for="form_example_method_select_a">Example select<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</label><div class="select"><select autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select__element" name="form[example_method_select_a]" id="form_example_method_select_a"><option value="1">One</option>
<option value="2">Two</option></select></div></div>

  <div class="my-wrapper-class cfa-select form-group"><label data-spec="label-1" class="form-question" for="form_example_method_select_b">Example select - with html-impacting options<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</label><div class="select"><select autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="my-select-class select__element" name="form[example_method_select_b]" id="form_example_method_select_b"><option value="" label=" "></option>
<option value="option a">option a</option>
<option value="option b">option b</option></select></div></div>

  <div class="cfa-select form-group"><label class="form-question" for="form_example_method_with_validation_select">Example select - required and with blank option</label><div class="select"><div class="field_with_errors"><select autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required="required" class="select__element" name="form[example_method_with_validation_select]" id="form_example_method_with_validation_select"><option value="">(blank)</option>
<option value="option a">option a</option>
<option value="option b">option b</option></select></div></div></div>

<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %>
  <%= f.cfa_select(:example_method_select_a,
                   'Example select',
                   [
                       ['One', 1],
                       ['Two', 2],
                   ],  # also: Model.all or ['one', 'two']
                   ) %>

  <%= f.cfa_select(:example_method_select_b,
                   'Example select - with html-impacting options',
                   ['option a', 'option b'],
                   autocomplete: "off", # html_options: autocomplete
                   class: 'my-select-class', # html_options: class
                   select_options: { include_blank: true },
                   label_options: { data: { spec: 'label-1' } },
                   wrapper_options: { class: 'my-wrapper-class' }
  ) %>

  <%= f.cfa_select(:example_method_with_validation_select,
                   'Example select - required and with blank option',
                   ['option a', 'option b'],
                   required: true,
                   select_options: { include_blank: '(blank)' }) %>

<% end %>

Fieldset # ◉

Fieldset - empty

Fieldset with wrapper options

First option

Second option

Fieldset with fieldset html options

First option

Second option

Fieldset with label_options

First option

Second option

Fieldset - required

First option

Second option

This is an example error message.

HTML ERB

<div class="cfa-fieldset form-group"><fieldset><legend class="form-question">Fieldset - empty<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</legend></fieldset></div>

  <div class="wrapper-class cfa-fieldset form-group" data-spec="wrapper"><fieldset><legend class="form-question">Fieldset with wrapper options<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</legend>
    <div class="cfa-radio-button"><label class="radio-button"><input type="radio" value="first_option" name="form[example_method_fieldset_b]" id="form_example_method_fieldset_b_first_option" />First option</label></div>
    <div class="cfa-radio-button"><label class="radio-button"><input type="radio" value="second_option" name="form[example_method_fieldset_b]" id="form_example_method_fieldset_b_second_option" />Second option</label></div>
</fieldset></div>
  <div class="cfa-fieldset form-group"><fieldset class="my-fieldset-class" data-spec="honeycrisp"><legend class="form-question">Fieldset with fieldset html options<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</legend>
    <div class="cfa-radio-button"><label class="radio-button"><input type="radio" value="first_option" name="form[example_method_fieldset_c]" id="form_example_method_fieldset_c_first_option" />First option</label></div>
    <div class="cfa-radio-button"><label class="radio-button"><input type="radio" value="second_option" name="form[example_method_fieldset_c]" id="form_example_method_fieldset_c_second_option" />Second option</label></div>
</fieldset></div>
  <div class="cfa-fieldset form-group"><fieldset><legend data-spec="label-1" class="form-question">Fieldset with label_options<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</legend>
    <div class="cfa-radio-button"><label class="radio-button"><input type="radio" value="first_option" name="form[example_method_fieldset_d]" id="form_example_method_fieldset_d_first_option" />First option</label></div>
    <div class="cfa-radio-button"><label class="radio-button"><input type="radio" value="second_option" name="form[example_method_fieldset_d]" id="form_example_method_fieldset_d_second_option" />Second option</label></div>
</fieldset></div>
  <div class="cfa-fieldset form-group"><fieldset required="required"><legend class="form-question">Fieldset - required</legend>
    <div class="cfa-radio-button"><label class="radio-button"><div class="field_with_errors"><input type="radio" value="first_option" name="form[example_method_with_validation_fieldset]" id="form_example_method_with_validation_fieldset_first_option" /></div>First option</label></div>
    <div class="cfa-radio-button"><label class="radio-button"><div class="field_with_errors"><input type="radio" value="second_option" name="form[example_method_with_validation_fieldset]" id="form_example_method_with_validation_fieldset_second_option" /></div>Second option</label></div>
<div class="text--error" id="">
  <i class="icon-warning"></i>
  This is an example error message.
</div>
</fieldset></div>

<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %>
  <%= f.cfa_fieldset(:example_method_fieldset_a, "Fieldset - empty") %>

  <%= f.cfa_fieldset(:example_method_fieldset_b,
                     "Fieldset with wrapper options",
                     wrapper_options: {
                         class: 'wrapper-class',
                         data: {spec: 'wrapper'}
                     }) do %>
    <%= f.cfa_radio_button(:example_method_fieldset_b, 'First option', :first_option) %>
    <%= f.cfa_radio_button(:example_method_fieldset_b, 'Second option', :second_option) %>
  <% end %>

  <%= f.cfa_fieldset(:example_method_fieldset_c,
                     "Fieldset with fieldset html options",
                       class: 'my-fieldset-class',
                       data: {spec: 'honeycrisp'}
                     ) do %>
    <%= f.cfa_radio_button(:example_method_fieldset_c, 'First option', :first_option) %>
    <%= f.cfa_radio_button(:example_method_fieldset_c, 'Second option', :second_option) %>
  <% end %>

  <%= f.cfa_fieldset(:example_method_fieldset_d,
                     "Fieldset with label_options",
                     label_options: { data: { spec: 'label-1' } }) do %>
    <%= f.cfa_radio_button(:example_method_fieldset_d, 'First option', :first_option) %>
    <%= f.cfa_radio_button(:example_method_fieldset_d, 'Second option', :second_option) %>
  <% end %>

  <%= f.cfa_fieldset(:example_method_with_validation_fieldset,
                     "Fieldset - required",
                     required: true) do %>
    <%= f.cfa_radio_button(:example_method_with_validation_fieldset, 'First option', :first_option) %>
    <%= f.cfa_radio_button(:example_method_with_validation_fieldset, 'Second option', :second_option) %>
  <% end %>
<% end %>

Radio Button # ◉

Radios with wrapper options

First option

Second option

Radios with label options

First option

Second option

Radios with input options

First option

Second option

HTML ERB

<div class="cfa-fieldset form-group"><fieldset><legend class="form-question">Radios with wrapper options<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</legend>
    <div class="wrapper-class cfa-radio-button"><label class="radio-button"><input type="radio" value="first_option" name="form[example_method_radio_a]" id="form_example_method_radio_a_first_option" />First option</label></div>
    <div class="cfa-radio-button"><label class="radio-button"><input type="radio" value="second_option" name="form[example_method_radio_a]" id="form_example_method_radio_a_second_option" />Second option</label></div>
</fieldset></div>
  <div class="cfa-fieldset form-group"><fieldset><legend class="form-question">Radios with label options<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</legend>
    <div class="cfa-radio-button"><label class="wrapper-class radio-button"><input type="radio" value="first_option" name="form[example_method_radio_b]" id="form_example_method_radio_b_first_option" />First option</label></div>
    <div class="cfa-radio-button"><label class="radio-button"><input type="radio" value="second_option" name="form[example_method_radio_b]" id="form_example_method_radio_b_second_option" />Second option</label></div>
</fieldset></div>
  <div class="cfa-fieldset form-group"><fieldset><legend class="form-question">Radios with input options<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</legend>
    <div class="cfa-radio-button"><label class="radio-button"><input required="required" class="my-radio-class" type="radio" value="first_option" name="form[example_method_radio_with_validation_a]" id="form_example_method_radio_with_validation_a_first_option" />First option</label></div>
    <div class="cfa-radio-button"><label class="radio-button"><input required="required" class="my-radio-class" type="radio" value="second_option" name="form[example_method_radio_with_validation_a]" id="form_example_method_radio_with_validation_a_second_option" />Second option</label></div>
</fieldset></div>

<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %>
  <%= f.cfa_fieldset(:example_method_radio_a, "Radios with wrapper options") do %>
    <%= f.cfa_radio_button(:example_method_radio_a, 'First option', :first_option, wrapper_options: { class: 'wrapper-class' }) %>
    <%= f.cfa_radio_button(:example_method_radio_a, 'Second option', :second_option) %>
  <% end %>

  <%= f.cfa_fieldset(:example_method_radio_b, "Radios with label options") do %>
    <%= f.cfa_radio_button(:example_method_radio_b, 'First option', :first_option, label_options: { class: 'wrapper-class' }) %>
    <%= f.cfa_radio_button(:example_method_radio_b, 'Second option', :second_option) %>
  <% end %>

  <%= f.cfa_fieldset(:example_method_radio_with_validation_a, "Radios with input options") do %>
    <%= f.cfa_radio_button(:example_method_radio_with_validation_a, 'First option', :first_option, required: true, class: 'my-radio-class') %>
    <%= f.cfa_radio_button(:example_method_radio_with_validation_a, 'Second option', :second_option, required: true, class: 'my-radio-class') %>
  <% end %>
<% end %>

Collection Radio Buttons # ◉

Fieldset with collection radio boxes

OneTwo

Fieldset with collection radio boxes - with validation

One

Two

This is an example error message.

HTML ERB

<div class="cfa-fieldset form-group"><fieldset><legend class="form-question">Fieldset with collection radio boxes<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</legend>
    <div class="cfa-collection-radio-buttons"><input type="hidden" name="form[example_method_collection_radio_buttons_a]" value="" autocomplete="off" /><label class="radio-button" for="form_example_method_collection_radio_buttons_a_1"><input type="radio" value="1" name="form[example_method_collection_radio_buttons_a]" id="form_example_method_collection_radio_buttons_a_1" />One</label><label class="radio-button" for="form_example_method_collection_radio_buttons_a_2"><input type="radio" value="2" name="form[example_method_collection_radio_buttons_a]" id="form_example_method_collection_radio_buttons_a_2" />Two</label></div>
</fieldset></div>
  <div class="cfa-fieldset form-group"><fieldset required="required"><legend class="form-question">Fieldset with collection radio boxes - with validation</legend>
    <div class="cfa-collection-radio-buttons"><input type="hidden" name="form[example_method_with_validation_collection_radio_buttons]" value="" autocomplete="off" /><label class="radio-button" for="form_example_method_with_validation_collection_radio_buttons_1"><div class="field_with_errors"><input type="radio" value="1" name="form[example_method_with_validation_collection_radio_buttons]" id="form_example_method_with_validation_collection_radio_buttons_1" /></div>One</label><label class="radio-button" for="form_example_method_with_validation_collection_radio_buttons_2"><div class="field_with_errors"><input type="radio" value="2" name="form[example_method_with_validation_collection_radio_buttons]" id="form_example_method_with_validation_collection_radio_buttons_2" /></div>Two</label></div>
<div class="text--error" id="">
  <i class="icon-warning"></i>
  This is an example error message.
</div>
</fieldset></div>

<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %>
  <%= f.cfa_fieldset(:example_method_collection_radio_buttons_a, "Fieldset with collection radio boxes") do %>
    <%= f.cfa_collection_radio_buttons(:example_method_collection_radio_buttons_a,
                                   [
                                       Cfa::Styleguide::FormExample.new(id: 1, name: 'One'),
                                       Cfa::Styleguide::FormExample.new(id: 2, name: 'Two')
                                   ],
                                   :id,
                                   :name) %>
  <% end %>

  <%= f.cfa_fieldset(:example_method_with_validation_collection_radio_buttons, "Fieldset with collection radio boxes - with validation", required: true) do %>
    <%= f.cfa_collection_radio_buttons(:example_method_with_validation_collection_radio_buttons,
                                     [
                                         Cfa::Styleguide::FormExample.new(id: 1, name: 'One'),
                                         Cfa::Styleguide::FormExample.new(id: 2, name: 'Two')
                                     ],
                                     :id,
                                     :name) %>
  <% end %>
<% end %>

Check Box # ◉

Checkboxes

Option 1

Option 2 - with wrapper options

Option 3 - with label options

Option 4 - with checked value

Option 5 - with checked/unchecked value

I accept these terms

I accept these terms - with validation errors

This is an example error message.

HTML ERB

<div class="cfa-fieldset form-group"><fieldset><legend class="form-question">Checkboxes<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</legend>
    <div class="cfa-check-box"><label class="checkbox"><input name="form[example_method_check_box_a]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_check_box_a]" id="form_example_method_check_box_a" /><div class="checkbox__label">Option 1</div></label></div>
    <div class="wrapper-class cfa-check-box"><label class="checkbox"><input name="form[example_method_check_box_c]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_check_box_c]" id="form_example_method_check_box_c" /><div class="checkbox__label">Option 2 - with wrapper options</div></label></div>
    <div class="cfa-check-box"><label class="label-class checkbox"><input name="form[example_method_check_box_d]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="form[example_method_check_box_d]" id="form_example_method_check_box_d" /><div class="checkbox__label">Option 3 - with label options</div></label></div>
    <div class="cfa-check-box"><label class="checkbox"><input name="form[example_method_check_box_e]" type="hidden" value="0" autocomplete="off" /><input required="required" type="checkbox" value="yes" name="form[example_method_check_box_e]" id="form_example_method_check_box_e" /><div class="checkbox__label">Option 4 - with checked value</div></label></div>
    <div class="cfa-check-box"><label class="checkbox"><input name="form[example_method_check_box_f]" type="hidden" value="no" autocomplete="off" /><input required="required" type="checkbox" value="yes" name="form[example_method_check_box_f]" id="form_example_method_check_box_f" /><div class="checkbox__label">Option 5 - with checked/unchecked value</div></label></div>
</fieldset></div>
  <!--  Must wrap in fieldset to get errors for individual checkboxes-->
  <div class="cfa-fieldset form-group"><fieldset required="required"><legend class="is-hidden form-question">I accept these terms</legend>
    <div class="cfa-check-box"><label class="checkbox"><input name="form[example_method_with_validation_check_box_a]" type="hidden" value="0" autocomplete="off" /><div class="field_with_errors"><input type="checkbox" value="1" name="form[example_method_with_validation_check_box_a]" id="form_example_method_with_validation_check_box_a" /></div><div class="checkbox__label">I accept these terms - with validation errors</div></label></div>
<div class="text--error" id="">
  <i class="icon-warning"></i>
  This is an example error message.
</div>
</fieldset></div>

<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %>
  <%= f.cfa_fieldset(:example_method_check_box_summary, "Checkboxes") do %>
    <%= f.cfa_check_box(:example_method_check_box_a, 'Option 1') %>
    <%= f.cfa_check_box(:example_method_check_box_c, 'Option 2 - with wrapper options', wrapper_options: { class: 'wrapper-class' }) %>
    <%= f.cfa_check_box(:example_method_check_box_d, 'Option 3 - with label options', label_options: { class: 'label-class' }) %>
    <%= f.cfa_check_box(:example_method_check_box_e, 'Option 4 - with checked value', :yes, required: true) %>
    <%= f.cfa_check_box(:example_method_check_box_f, 'Option 5 - with checked/unchecked value', :yes, :no, required: true) %>
  <% end %>

  <!--  Must wrap in fieldset to get errors for individual checkboxes-->
  <%= f.cfa_fieldset(:example_method_with_validation_check_box_a, "I accept these terms", label_options: { class: 'is-hidden' }, required: true) do %>
    <%= f.cfa_check_box(:example_method_with_validation_check_box_a, 'I accept these terms - with validation errors') %>
  <% end %>
<% end %>

Collection Check Boxes # ◉

Fieldset with collection check boxes

One

Two

Fieldset with collection check boxes

One

Two

This is an example error message.

HTML ERB

<div class="cfa-fieldset form-group"><fieldset><legend class="form-question">Fieldset with collection check boxes<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</legend>
    <div class="cfa-collection-check-boxes"><input type="hidden" name="form[example_method_collection_check_boxes_a][]" value="" autocomplete="off" /><label class="checkbox" for="form_example_method_collection_check_boxes_a_1"><input type="checkbox" value="1" name="form[example_method_collection_check_boxes_a][]" id="form_example_method_collection_check_boxes_a_1" /><div class="checkbox__label">One</div></label><label class="checkbox" for="form_example_method_collection_check_boxes_a_2"><input type="checkbox" value="2" name="form[example_method_collection_check_boxes_a][]" id="form_example_method_collection_check_boxes_a_2" /><div class="checkbox__label">Two</div></label></div>
</fieldset></div>
  <div class="cfa-fieldset form-group"><fieldset><legend class="form-question">Fieldset with collection check boxes<span class="form-question--optional"></span>
<span class="sr-only">(Optional)</span>
</legend>
    <div class="cfa-collection-check-boxes"><input type="hidden" name="form[example_method_with_validation_collection_check_boxes][]" value="" autocomplete="off" /><label class="checkbox" for="form_example_method_with_validation_collection_check_boxes_1"><div class="field_with_errors"><input type="checkbox" value="1" name="form[example_method_with_validation_collection_check_boxes][]" id="form_example_method_with_validation_collection_check_boxes_1" /></div><div class="checkbox__label">One</div></label><label class="checkbox" for="form_example_method_with_validation_collection_check_boxes_2"><div class="field_with_errors"><input type="checkbox" value="2" name="form[example_method_with_validation_collection_check_boxes][]" id="form_example_method_with_validation_collection_check_boxes_2" /></div><div class="checkbox__label">Two</div></label></div>
<div class="text--error" id="">
  <i class="icon-warning"></i>
  This is an example error message.
</div>
</fieldset></div>

<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %>
  <%= f.cfa_fieldset(:example_method_collection_check_boxes_a, "Fieldset with collection check boxes") do %>
    <%= f.cfa_collection_check_boxes(:example_method_collection_check_boxes_a,
                                     [
                                         Cfa::Styleguide::FormExample.new(id: 1, name: 'One'),
                                         Cfa::Styleguide::FormExample.new(id: 2, name: 'Two')
                                     ],
                                     :id,
                                     :name) %>
  <% end %>

  <%= f.cfa_fieldset(:example_method_with_validation_collection_check_boxes, "Fieldset with collection check boxes") do %>
    <%= f.cfa_collection_check_boxes(:example_method_with_validation_collection_check_boxes,
                                     [
                                         Cfa::Styleguide::FormExample.new(id: 1, name: 'One'),
                                         Cfa::Styleguide::FormExample.new(id: 2, name: 'Two')
                                     ],
                                     :id,
                                     :name) %>
  <% end %>
<% end %>