Insites Docs Web Components V1Data EntryRadio

Radio

Last updated on August 02, 2024.

Element: <ins-radio>

Defines a radio field.

Complete Example

Code Snippet

<ins-radio name="sample" label="Radio" value="Radio Value"></ins-radio>
Default State

Code Snippet

<ins-radio></ins-radio>
Selected State

Code Snippet

<ins-radio label="Selected Field" checked></ins-radio>
Disabled State

Code Snippet

<ins-radio label="Disabled Field" disabled></ins-radio>
Direct Value Set

Code Snippet

<ins-radio id="directFieldEl"></ins-radio>
<script>
  var label = "Set Data";
  var name = "sample";
  var value = "Data";
  var field = document.getElementById('directFieldEl');
  directFieldEl.addEventListener('didLoad', function(e){
    field.name = name;
    field.label = label;
    field.value = value;
    field.checked = true;
  });
</script>
Events

Code Snippet

<ins-radio id="eventFieldEl" name="sample" label="Radio" value="Radio Value"></ins-radio>
<script>
  var eventFieldEl = document.getElementById('eventFieldEl');
  eventFieldEl.addEventListener('onSelect', event => {
    var event = event.detail;
    console.log("Radio event", event);
    alert("Check console log for event data");
  });
</script>
Groups

Code Snippet

<ins-radio name="gender" label="Male" value="Male"></ins-radio>
<ins-radio name="gender" label="Female" value="Female"></ins-radio>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
disabled boolean false true, false Disables the field
checked boolean false true, false Make the field checked
label string "" any Label shown for the field
name string "" any Defines the field name
value string "" any Defines the field value

 

Events

 

EVENT OBJECT DESCRIPTION
onSelect name, value Emits radio properties on change

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.