<form class="needs-validation" novalidate>
<div class="alert alert-danger d-none">Please review the problems below:</div>
<div class="form-group">
<label>Birthday</label>
<div class="d-flex flex-row justify-content-between align-items-center">
<select id="exampleInputDateYear" class="custom-select mr-1" required>
<option></option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
<select id="exampleInputDateMonth" class="custom-select mx-1" required>
<option></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>
<select id="exampleInputDateDay" class="custom-select ml-1" required>
<option></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="invalid-feedback">Please provide a valid value.</div>
<div class="valid-feedback">Looks good!</div>
<small class="form-text text-muted">Date multi select example</small>
</div>
<div class="form-group">
<label for="exampleCustomFile">Avatar</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<div class="invalid-feedback">Please provide a valid value.</div>
<div class="valid-feedback">Looks good!</div>
<small class="form-text text-muted">File input example</small>
</div>
<fieldset class="form-group">
<legend class="col-form-label pt-0">Color</legend>
<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio1" value="option1" required>
<label class="custom-control-label" for="exampleInlineRadio1">Red</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio2" value="option2" required>
<label class="custom-control-label" for="exampleInlineRadio2">Pink</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio3" value="option3" required>
<label class="custom-control-label" for="exampleInlineRadio3">Violet</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio4" value="option4" required>
<label class="custom-control-label" for="exampleInlineRadio4">Indigo</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio5" value="option5" required>
<label class="custom-control-label" for="exampleInlineRadio5">Blue</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio6" value="option6" required>
<label class="custom-control-label" for="exampleInlineRadio6">Teal</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio7" value="option7" required>
<label class="custom-control-label" for="exampleInlineRadio7">Green</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" type="radio" name="exampleInlineRadioColor" id="exampleInlineRadio8" value="option8" required>
<label class="custom-control-label" for="exampleInlineRadio8">Yellow</label>
</div>
<div class="invalid-feedback">Please provide a valid value.</div>
<div class="valid-feedback">Looks good!</div>
<small class="form-text text-muted">Collection as inline radio buttons example</small>
</fieldset>
<fieldset class="form-group">
<legend class="col-form-label pt-0">Fruit</legend>
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox1" value="option1" required>
<label class="custom-control-label" for="exampleInlineCheckbox1">Apple</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox2" value="option2" required>
<label class="custom-control-label" for="exampleInlineCheckbox2">Banana</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox3" value="option3" required>
<label class="custom-control-label" for="exampleInlineCheckbox3">Cherry</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox4" value="option4" required>
<label class="custom-control-label" for="exampleInlineCheckbox4">Coconut</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox5" value="option5" required>
<label class="custom-control-label" for="exampleInlineCheckbox5">Grape</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox6" value="option6" required>
<label class="custom-control-label" for="exampleInlineCheckbox6">Lime</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox7" value="option7" required>
<label class="custom-control-label" for="exampleInlineCheckbox7">Mango</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox8" value="option8" required>
<label class="custom-control-label" for="exampleInlineCheckbox8">Orange</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox9" value="option9" required>
<label class="custom-control-label" for="exampleInlineCheckbox9">Pear</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" id="exampleInlineCheckbox10" value="option10" required>
<label class="custom-control-label" for="exampleInlineCheckbox10">Pineapple</label>
</div>
<small class="form-text text-muted">Collection as inline check boxes example</small>
</fieldset>
<div class="form-group">
<label for="exampleSelectMusic">Music</label>
<select multiple="" class="custom-select" id="exampleSelectMusic" required>
<option value="rock">Rock</option>
<option value="pop">Pop</option>
<option value="jazz">Jazz</option>
<option value="heavy_metal">Heavy Metal</option>
<option value="hip_hop">Hip Hop</option>
<option value="house">House</option>
<option value="electronic_dance">EDM</option>
<option value="dance">Dance</option>
<option value="techno">Techno</option>
</select>
<div class="invalid-feedback">Please provide a valid value.</div>
<div class="valid-feedback">Looks good!</div>
<small class="form-text text-muted">Collection multiple select example</small>
</div>
<div class="form-group">
<label for="exampleSelectLanguage">Language</label>
<select class="custom-select" id="exampleSelectLanguage" required>
<option value="">Select your Language</option>
<option value="en">English</option>
<option value="de">German</option>
<option value="es">Spanish</option>
<option value="ru">Russian</option>
</select>
<div class="invalid-feedback">Please provide a valid value.</div>
<div class="valid-feedback">Looks good!</div>
<small class="form-text text-muted">Collection select example</small>
</div>
<fieldset class="form-group">
<legend class="col-form-label pt-0">Pill</legend>
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" name="exampleRadiosPill" id="exampleRadiosPillRed" value="red" required>
<label class="custom-control-label" for="exampleRadiosPillRed">
Red pill
</label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" name="exampleRadiosPill" id="exampleRadiosPillBlue" value="blue" required>
<label class="custom-control-label" for="exampleRadiosPillBlue">
Blue pill
</label>
</div>
<div class="invalid-feedback">Please provide a valid value.</div>
<div class="valid-feedback">Looks good!</div>
<small class="form-text text-muted">Collection as radio buttons example</small>
</fieldset>
<fieldset class="form-group">
<legend class="col-form-label pt-0">Choises</legend>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="exampleCheckbox1" value="option1" required>
<label class="custom-control-label" for="exampleCheckbox1">Learn the Ruby programming language</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="exampleCheckbox2" value="option1" required>
<label class="custom-control-label" for="exampleCheckbox2">Create a Ruby on Rails application</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="exampleCheckbox3" value="option1" required>
<label class="custom-control-label" for="exampleCheckbox3">Practice Ruby, Rails, Tests and Simple Form</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="exampleCheckbox4" value="option1" required>
<label class="custom-control-label" for="exampleCheckbox4">Deploy your application in the cloud</label>
</div>
<div class="invalid-feedback">Please provide a valid value.</div>
<div class="valid-feedback">Looks good!</div>
<small class="form-text text-muted">Collection as check boxes example</small>
</fieldset>
<div class="form-group">
<label for="exampleRangeMood">Mood</label>
<input type="range" class="custom-range" id="exampleRangeMood" step="10" required>
<div class="invalid-feedback">Please provide a valid value.</div>
<div class="valid-feedback">Looks good!</div>
<small class="form-text text-muted">Integer range example</small>
</div>
<div class="form-group">
<label>Awake</label>
<div class="d-flex flex-row justify-content-between align-items-center">
<select id="exampleInputTimeHour" class="custom-select mr-1" required>
<option></option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</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>
</select>
:
<select id="exampleInputTimeMinute" class="custom-select ml-1" required>
<option></option>
<option value="00">00</option>
<option value="30">30</option>
</select>
</div>
<div class="invalid-feedback">Please provide a valid value.</div>
<div class="valid-feedback">Looks good!</div>
<small class="form-text text-muted">Time multi select example</small>
</div>
<div class="form-group">
<label>First kiss</label>
<div class="d-flex flex-row justify-content-between align-items-center">
<select id="exampleInputDatetimeYear" class="custom-select mr-1" required>
<option></option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
<select id="exampleInputDatetimeMonth" class="custom-select mx-1" required>
<option></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>
<select id="exampleInputDatetimeDay" class="custom-select mx-1" required>
<option></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>
—
<select id="exampleInputDatetimeHour" class="custom-select mx-1" required>
<option></option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</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>
</select>
:
<select id="exampleInputDatetimeMinute" class="custom-select ml-1" required>
<option></option>
<option value="00">00</option>
<option value="30">30</option>
</select>
</div>
<small class="form-text text-muted">Datetime multi select example</small>
</div>
<fieldset class="form-group">
<div class="custom-control custom-switch">
<input class="custom-control-input" type="checkbox" value="" id="exampleCheckTerms" required>
<label class="custom-control-label" for="exampleCheckTerms">Terms</label>
<div class="invalid-feedback">Terms must be accepted</div>
<div class="valid-feedback">Looks good!</div>
<small class="form-text text-muted">Boolean as check box example</small>
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Create User!</button>
<button type="reset" class="btn btn-outline-secondary">Cancel</button>
</form>
<%= simple_form_for @user, url: examples_custom_path,
wrapper_mappings: {
boolean: :custom_boolean,
check_boxes: :custom_collection,
date: :custom_multi_select,
datetime: :custom_multi_select,
file: :custom_file,
radio_buttons: :custom_collection,
range: :custom_range,
time: :custom_multi_select,
select: :custom_multi_select
} do |f| %>
<%= f.error_notification %>
<%= render partial: "shared/form_unused_as_hidden", locals: {
f: f, fields: [:name, :email, :password, :bio, :active, :friends]
} %>
<%= f.input :birthday %>
<%= f.input :avatar, as: :file, input_html: { accept: User::AVATAR } %>
<%= f.input :color, as: :radio_buttons, collection: User::COLOR, wrapper: :custom_collection_inline %>
<%= f.input :fruit, as: :check_boxes, collection: User::FRUIT, wrapper: :custom_collection_inline %>
<%= f.input :music, collection: User::MUSIC, input_html: { multiple: true } %>
<%= f.input :language, collection: User::LANGUAGE, prompt: :translate %>
<%= f.input :pill, as: :radio_buttons, collection: User::PILL %>
<%= f.input :choises, as: :check_boxes, collection: User::CHOISES %>
<%= f.input :mood, as: :range, input_html: { step: 10 } %>
<%= f.input :awake %>
<%= f.input :first_kiss %>
<%= f.input :terms, wrapper: :custom_boolean_switch %>
<%= f.button :submit, class: "btn-primary" %>
<%= f.button :button, "Cancel", type: "reset", class: "btn-outline-secondary" %>
<% end %>