# Add a "radio" widget type in forms

**URL:** <https://discourse.openondemand.org/t/add-a-radio-widget-type-in-forms/601>\
**Category:** Get Help\
**Tags:** feature-request\
**Created:** [November 12, 2019, 4:09pm UTC](https://discourse.openondemand.org/t/add-a-radio-widget-type-in-forms/601 "2019-11-12T16:09:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jms27000](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/jms27000/32/147_2.png) [@jms27000](https://discourse.openondemand.org/u/jms27000)\
**Post date:** [November 12, 2019, 4:09pm UTC](https://discourse.openondemand.org/t/add-a-radio-widget-type-in-forms/601/1 "2019-11-12T16:09:34Z")

</div>

Hi, everybody

i’m looking for using a “radio” widget type in forms with the following possible attributes :

```
  inputradio:
    widget: radio
    help: "you can choose"
    options: 
      - ["choice 1"]
      - ["choice 2"]
    checked: "choice 1"

```

It mays occur several instances of radio buttons in the same forms.

question : have you an example realized in javascript doing that purpose ?

i suppose that the good place shall be in the “/var/www/ood/apps/sys/dashboard/app/helpers/batch\_connect/session\_contexts\_helper.rb” file which contains :

```
case widget
when "select"
  form.select attrib.id, attrib.select_choices, field_options, attrib.html_options
when "resolution_field"
  resolution_field(form, attrib.id, all_options)
when "check_box"
  form.form_group attrib.id, help: field_options[:help] do
    form.check_box attrib.id, all_options, attrib.checked_value, attrib.unchecked_value
  end
else
  form.send widget, attrib.id, all_options
end

```

waiting for your effective help, as usual.

jean-marie

---

<div class="post-metadata">

**Author:** ![efranz](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/efranz/32/27_2.png) [@efranz](https://discourse.openondemand.org/u/efranz)\
**Post date:** [November 12, 2019, 6:01pm UTC](https://discourse.openondemand.org/t/add-a-radio-widget-type-in-forms/601/2 "2019-11-12T18:01:11Z")

</div>

This appears to work in an initial test. Note this PR has not been reviewed or merged yet so it is subject to change: [https://github.com/OSC/ondemand/pull/139/files](https://github.com/OSC/ondemand/pull/139/files)

basically you modify `apps/dashboard/app/helpers/batch_connect/session_contexts_helper.rb ` as you suggested. Then you can do something like this:

```auto
version:
  widget: radio
  label: "MATLAB version"
  help: "This defines the version of MATLAB you want to load."
  options:
    - ["R2018b", "matlab/r2018b"]
    - ["R2018a", "matlab/r2018a"]
    - ["R2017a", "matlab/r2017a"]
    - ["R2016b", "matlab/r2016b"]
    - ["R2015b", "matlab/r2015b"]
  checked: "matlab/r2018a"

```

And this is the result:

 ![32%20PM](https://us1.discourse-cdn.com/flex015/uploads/osc/original/1X/0c024e7ae28efe8632ba321f621c467f04247402.png)

---

<div class="post-metadata">

**Author:** ![jms27000](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/jms27000/32/147_2.png) [@jms27000](https://discourse.openondemand.org/u/jms27000)\
**Post date:** [November 13, 2019, 9:28pm UTC](https://discourse.openondemand.org/t/add-a-radio-widget-type-in-forms/601/3 "2019-11-13T21:28:30Z")

</div>

Hi, the OSC team.

i have tested this mod and it works fine ! you’re the best !  
one question of style : by default, all the form types are shown in a vertical mode. it’s possible to show by example for the radio buttons, side by side ?  
if you prefer, i can open a specific topic on the style subject.

thanks a lot

jean-marie

---

<div class="post-metadata">

**Author:** ![efranz](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/efranz/32/27_2.png) [@efranz](https://discourse.openondemand.org/u/efranz)\
**Post date:** [November 14, 2019, 1:54am UTC](https://discourse.openondemand.org/t/add-a-radio-widget-type-in-forms/601/4 "2019-11-14T01:54:57Z")

</div>

I made a mistake. The see the updated code here: [https://github.com/OSC/ondemand/pull/139/files](https://github.com/OSC/ondemand/pull/139/files).

Bootstrap supports radio buttons inline style, but some modifications need to occur:

1. `<label>Version:</label>` now needs to wrap around the radio buttons
2. each radio button needs the class `radio-inline`

If you do both of these steps you end up with what looks like this:

 ![36%20PM](https://us1.discourse-cdn.com/flex015/uploads/osc/original/1X/2450f586d3f98a423f80985653295691039a93c3.png)

If you also add `form-horizontal` class to the `<form` tag the label lines up slightly better:

 ![11%20PM](https://us1.discourse-cdn.com/flex015/uploads/osc/original/1X/c267344a638ea6711e42c4fd5f67993f9edde6ab.png)

These are non trivial changes though to support both styles. You could add a form.js file in the root of the app and use jQuery to add these classes at runtime, but the label might have spacing issues. I’ll open an issue on GitHub to track.

---

<div class="post-metadata">

**Author:** ![westburg.2](https://avatars.discourse-cdn.com/v4/letter/w/0ea827/32.png) [@westburg.2](https://discourse.openondemand.org/u/westburg.2)\
**Post date:** [May 26, 2022, 3:31pm UTC](https://discourse.openondemand.org/t/add-a-radio-widget-type-in-forms/601/5 "2022-05-26T15:31:30Z")

</div>

Closed on May 26, 2022, 3:31pm UTC