CODEWITHSUNDEEP
ruby-on-railssimple-form
Opi Hana
Opi Hana

Reputation: 133

Apply one simple_form custom wrapper to some radio buttons, but a different wrapper for other radio buttons

We want to apply the first radio button wrapper to most radios using simple_form. We have done so in our simple_form config.

config.wrapper_mappings = {
 radio_buttons: :wrapped_radio_buttons
}

First radio class:

config.wrappers(
 :wrapped_radio_buttons,
 class: "field-unit radio-buttons",
 error_class: "field-with-errors"
) do |b|
 b.use :error, wrap_with: { tag: "span", class: "field-error" }
 b.use :label_input
end

We want to apply a second radio wrapper to some other radios:

config.wrappers(
 :wrapped_radio_blocks,
 class: "field-unit radio-buttons radio-block-group",
 error_class: "field-with-errors"
) do |b|
  b.use :label
  b.use :error, wrap_with: { tag: "span", class: "field-error" }
  b.wrapper tag: "div", class: "radio-blocks" do |ba|
   ba.use :input
  end
end

We tried adding a config wrapper mapping for the second option, but seem to be able to only apply one wrapper per html input type. How can we apply the second wrapper to some radios?

Here is our html:

<%= f.input(
  :fake_input,
  as: :radio_buttons,
  collection: t(
    [
      :radio_option_one,
      :radio_option_two,
      :radio_option_three,
      :radio_option_four,
      :radio_option_five,
    ],
    scope: "fake_scope",
  )
) %>

We want to replace that as: :radio_buttons with a different line for this second wrapper type.

Upvotes: 2

Views: 363

Answers (1)

Opi Hana
Opi Hana

Reputation: 133

Well, we solved this shortly after posting using collection_wrapper_tag and collection_wrapper_class workarounds instead of creating an entirely new simple_form custom wrapper.

<%= f.input(
  :regular_radio_example,
  as: :radio_buttons,
  collection: t(
    [
      :radio_option_one,
      :radio_option_two,
      :radio_option_three,
      :radio_option_four,
      :radio_option_five,
    ],
    scope: "fake_scope",
  ),
) %>

<%= f.input(
  :new_cool_radio_example,
  as: :radio_buttons,
  wrapper_html: { class: "radio-block-group" },
  collection: t(
    [
      :radio_option_one,
      :radio_option_two,
      :radio_option_three,
      :radio_option_four,
      :radio_option_five,
    ],
    scope: "fake_scope",
  ),
  collection_wrapper_tag: "div",
  collection_wrapper_class: "radio-blocks",
) %>

Upvotes: 1

Related Questions