Default Form Builder

<%= form_with url: root_path, data: { controller: "fields" } do |f| %>
  <div class="grid gap-x-4 md:grid-cols-2">
    <%= f.text_field :first_name, autofocus: true, required: true %>
    <%= f.text_field :last_name %>
  </div>

  <div class="grid gap-x-4 md:grid-cols-2">
    <%= f.choices :country_multiple, ["United States", "Canada", "Mexico"], { include_blank: "Please Select…" }, { multiple: true, data: { max_item_count: 2 } } %>
    <%= f.choices :country, ["United States", "Canada", "Mexico", ["Other", data: { custom_properties: f.field_id(:country, "other", :fieldset) } ]], { hint: "Select Other to enable the custom country name field", include_blank: "Please Select…" }, { required: true, data: { action: "change->fields#enable", search: root_path, hint: "Select Other to enable the custom country name field." } } %>
  </div>

  <%= field_set_tag nil, disabled: true, class: "disabled:hidden", id: f.field_id(:country, :other, :fieldset), name: f.field_name(:country) do %>
    <%= f.text_field :country_name, placeholder: "What is your country?" %>
  <% end %>

  <%= f.email_field :email, autocomplete: "email" %>
  <%= f.easepick :date, data: {
    easepick_plugins: ["LockPlugin", "AmpPlugin"],
    easepick_amp_dropdown: {
      months: true,
      years: true,
      maxYear: Time.zone.today.year + 10,
      minYear: Time.zone.today.year - 10
    }
  } %>
  <%= f.password_field :password, autocomplete: "current-password", hint: "Password should contain at least 8 characters, including at least one letter and one number" %>
  <%= f.text_area :bio %>

  <%= f.group do %>
    <%= f.check_box :free_shipping, hint: "Hint text" %>
  <% end %>

  <%= f.group class: "form__radio_collection" do %>
    <%= f.radio_button :radio, "1", label: "Radio 1" %>
    <%= f.radio_button :radio, "2", checked: true , hint: "Selected by default" %>
    <%= f.radio_button :radio, "3" %>
  <% end %>

  <%= f.group do %>
    <%= f.toggler :toggler %>
  <% end %>

  <div class="form__actions">
    <%= f.submit "Save", class: "btn-lg" %>
  </div>
<% end %>