Component library

Radio

Last updated 2 November 2026

Defines a radio field.

Live demo

<ins-radio 
  name="sample" 
  label="Radio" 
  value="Radio Value"
  tooltip="This is a sample tooltip content. It also support html content.">
</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
tooltip	string	""	-	Displays a tooltip beside the label. Supports HTML Content

Events

EVENT	OBJECT	DESCRIPTION
insCheck	name, value	Emits radio properties on change
insValueChange	value	Emits the value on change

Examples

Default State

<ins-radio></ins-radio>

Selected State

<ins-radio 
  label="Selected Field" 
  Checked>
</ins-radio>

Disabled State

<ins-radio 
  label="Disabled Field" 
  Disabled>
</ins-radio>

Direct Value Set

<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

<ins-radio 
  id="eventFieldEl" 
  name="sample" 
  label="Radio" 
  value="Radio Value">
</ins-radio>

<script>
  var eventFieldEl = document.getElementById('eventFieldEl');
  eventFieldEl.addEventListener('insCheck', event => {
    var event = event.detail;
    console.log("Radio event", event);
    alert("Check console log for event data");
  });
</script>

Radio Group

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

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