CfaFormBuilder
CfAFormBuilder is a helper that generates accessible form fields for the styleguide.
$
/hr
can't be blank
<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>
can't be 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 %><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>
can't be 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 %>
can't be blank
<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>
can't be 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 %><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>
can't be 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 %><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>
can't be 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 %><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>
can't be 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 %><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>
can't be 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 %><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>
can't be 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 %><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 %><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>
can't be 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 %>