Wrapping a checkboxset (or radio set)

[colmexdev]

Hi there!

Once again with a doubt. I checked the spec but I couldn't find anything about this: I'd like to wrap every checkboxset option without the general label to make a grid-like ordering of them.

wrapper is not an option, because it takes the label into account. tag_wrapper isn't also helpful, because it only wraps each given option and is already used for styling. So what would be the correct way to do it (if it can be done, of course)?

Thanks in advance!

[jeremyevans]

Can you please post an example with the code you have and the HTML you want to generate?

[colmexdev]

Sure! I would like to have something like this:

f.input(:attribute, required: true,
  type: :checkboxset, wrapper: :fieldset, tag_wrapper: :checkbox_div,
  class: "input-class", options: Model::OPTS.each_with_index.to_a,
  # Tried classing the wrapper, but it contains the legend and takes it as part of the grid.
  wrapper_attr: { class: "flex flex-col gap-y-1.5 col-span-6 grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 auto-rows-auto grid-flow-col" },
  label_attr: { class: "font-semibold text-lg text-left block" },
  error_attr: { class: "text-error font-semibold block" }, attr: { class: "data-[input]:pr-[3.5rem]" }, labeler: :legend, label: "Tipo")

It generates this:

<fieldset class="flex flex-col gap-y-1.5 col-span-6 grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 auto-rows-auto grid-flow-col">
  <legend class="font-semibold text-lg text-left block" slot="label">Tipo<abbr title="Campo obligatorio">*</abbr></legend>
  <!-- Here is where I'd like to have a wrapper for visual accomodation of checkboxes -->
  <div class="flex gap-x-2 items-center">
    <input id="descubre_tipo_0" name="descubre[tipo][]" type="checkbox" value="0"><label class="font-semibold text-lg text-left block label-after" for="descubre_tipo_0" slot="label">Opt0</label>
  </div>
  <div class="flex gap-x-2 items-center">
    <input id="descubre_tipo_1" name="descubre[tipo][]" type="checkbox" value="1"><label class="font-semibold text-lg text-left block label-after" for="descubre_tipo_1" slot="label">Opt1</label>
  </div>
  <!-- ... -->
</fieldset>

Hope it's better info.

[jeremyevans]

For this, it sounds like you want to use f.inputs for the fieldset/legend. Then you can use a normal :wrapper for the attributes

f.inputs(:legend=>'Tipo',
  :legend_attr=>{:class=>"font-semibold text-lg text-left block"},
  :attr=>{ class: "flex flex-col gap-y-1.5 col-span-6 grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 auto-rows-auto grid-flow-col" }
  ) do
  f.input(:attribute,
    type: checkboxset,
    required: true,
    type: :checkboxset,
    wrapper: :div,
    tag_wrapper: :checkbox_div,
    class: "input-class",
    options: Model::OPTS.each_with_index.to_ a,
    error_attr: { class: "text-error font-semibold block" },
    attr: { class: "data-[input]:pr-[3.5rem]" },
    wrapper_attr: { class: "all-checkboxes-wrapper" },
    label: nil)
end

[colmexdev]

It works! But now I have two doubts:

• The legend tag here loses the required attribute for it belonging to the fieldset. Should I need to define a custom tag for the legend to have the abbr tag for required?
• If I wanted to add a hidden field to express "No choice", the correct way would be to prepend an input as follows: f.input(:attribute, type: :hidden, value: nil) before the checkboxset? Or is there a better way to add it?

[jeremyevans]

It seems unnecessary to have a required tag for a checkboxset, especially since you want to support a "No choice" option, but a custom tag would work for that.

You should not need an explicit hidden input. If the form submits without a checkbox from the set selected, then there will be no descubre[tipo][] parameter submitted, and you can infer from the missing parameter that no checkboxes were checked.

[colmexdev]

Ok, that's fair enough. Thanks for the reply!

One more thing: Is there a way to style the radio/checkbox input? I'd like to change, for example, color on focus, size, border color and transitions. I tried with class: "..." and attr: { class: "..." } inside f.input, but it didn't add classes to the boxes.

[jeremyevans]

To add options on individual checkboxes, you include the options as a hash for option's value (the value is in the :value key): https://github.com/jeremyevans/forme/blob/master/spec/forme_spec.rb#L540

There currently isn't support for adding the same attributes to each checkbox in a single place. If this is a styling issue, add a class to the wrapper and style using the appropriate CSS rules.

[colmexdev]

That worked perfectly for my purposes! Thank you very much!

Now, maybe it could be part of another discussion, but I have this situation: There is a specific input that needs to generate dynamic tags as user inserts them. So in JS I already created a web component that generates those dynamic multi fields on user input e.g.:

f.input(:attr,
  multiple: true, # Because it'll be an array of user-input strings
  wrapper: :custom_element, # The JS web component that generates the needed HTML for it to "work"
  class: "input-class",
  required: true, 
  wrapper_attr: { class: "wrapper-element-classes" },
  label_attr: { slot: "label", class: "label-classes" },
  error_attr: { class: "error-classes" },
  attr: { slot: "input" },
  label: "Tags")

The input's generated HTML (after JS processing of the component):

<custom-element>
  #shadow-root
    <div class="container-inputs">
      <input name="model_attr[]" value="attr1"> <!-- These are generated by user input -->
    </div>
    <div class="input-generator">
      <input id="model_attr"> <!-- This is the original input from the Forme's form -->
      <button type="button">Add</button>
    </div>
</custom-element>

But when I submit the form, none of the dynamically generated inputs are submitted. Is there a way to make something like this to work? I was thinking on forme_parse for it, but params aren't submmitted for this specific field, so first I need to solve that.

Thank you once again for all of your explanations.

[jeremyevans]

forme_set will only be able to handle inputs that were part of the form creation. If you are generating form inputs via javascript, you'll have to handle those parameters normally, not using forme_set. You can access the parameters via r.params, though you might want to consider using the typecast_params plugin, if you want to handle typecasting in the route block. I recommend using typecast_params, unless you are directly passing the parameter value to a model instance setter method (which will do its own typecasting).

[colmexdev]

As weird as it may seem, I tried putting dynamic inputs' HTML out of the shadow root and Forme actually read them all with forme_set. I don't know if this is the expected behavior, but I'm surprised to see that it seemed to be something about the component's shdow root and inputs' submission more than Forme's fields' setting.