How do you set the value of the Segmented control programatically or at runtime?

Form components
1

How do you set the value of the Segmented control programatically or at runtime? There is no setVal method for the control that I can see. I’d like to be able to set it programatically and have the UI change and show the correct setting.

2

Hello @Chris_Bucher :wave:

As my colleague mentioned in the other thread, to update a Segmented control programmatically, you’ll need to change the underlying input’s value. Since Segmented is built on top of native radio inputs, you can either:

  1. Set the checked state through the Mobiscroll instance, or
  2. Update the input’s checked property manually and then trigger a change event so the component can react to it.

Here’s an example:

HTML

<label>  Show as busy  <input id="event-status-busy" mbsc-segmented type="radio" name="event-status" value="busy"></label><label>  Show as free  <input id="event-status-free" mbsc-segmented type="radio" name="event-status" value="free"></label>

JS:

var freeSegmented = document.getElementById('event-status-free');var busySegmented = document.getElementById('event-status-busy');// Programmatically set to "free"mobiscroll.getInst(freeSegmented).checked = true;// Read the current valuevar isFree = mobiscroll.getInst(freeSegmented).checked;