Radio

Published on February 17, 2021, updated on June 01, 2021

Element: <ins-radio>

Defines a radio field.

Complete Example

Code Snippet

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

Radio Group

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
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

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.