Component library

Radio Group component

Last updated 2 November 2026

Used for grouping of ins-radio component.

Live demo

<ins-radio-group label="Radio Group" has-none tooltip="This is a sample tooltip content. It also support html content.">
  <div>
    <ins-radio label="Option 1" value="1"></ins-radio>
    <ins-radio label="Option 2" value="2"></ins-radio>
  </div>
</ins-radio-group>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
label	string		any	Defines label of radio group
disabled	boolean	false	true, false	Disables radio group field
readonly	boolean	false	true, false	Specifies that the radio group field is read-only
value	string		any	Defines value of dropdown list
has-error	boolean	false	true, false	Specifies validation or mandatory input for the radio group field
error-message	string	-	any	Defines the error message of the radio group field
has-none	boolean	false	true, false	Defines if the radio group field has a None (null) field
none-label	string	None	any	Defines the radio group field None (null) field label
html-description	boolean	false	true, false	Enables HTML tags in the description
description	string	""	any	Defines the description value

Events

EVENT	OBJECT	DESCRIPTION
insInput	value	Emits the value of the selected radio field

Examples

Description Example

<ins-radio-group
  label="Description Example"
  html-description
  description="This is a <strong>Description</strong> <i>Example</i>">
  <div>
    <ins-radio label="Option 1" value="1"></ins-radio>
    <ins-radio label="Option 2" value="2"></ins-radio>
  </div>
</ins-radio-group>

Error State

<ins-radio-group label="Radio Group Error" has-error>
  <div>
    <ins-radio label="Option 1" value="1"></ins-radio>
    <ins-radio label="Option 2" value="2"></ins-radio>
  </div>
</ins-radio-group>

Horizontal Attribute

<ins-radio-group label="Radio Group Horizontal" has-none horizontal>
  <div>
    <ins-radio label="Option 1" value="1"></ins-radio>
    <ins-radio label="Option 2" value="2"></ins-radio>
    <ins-radio label="Option 3" value="3"></ins-radio>
  </div>
</ins-radio-group>

Disabled Attribute

<ins-radio-group label="Radio Group Disabled" disabled>
  <div>
    <ins-radio label="Option 1" value="1"></ins-radio>
    <ins-radio label="Option 2" value="2"></ins-radio>
  </div>
</ins-radio-group>

Direct Set Data

<ins-radio-group id="directSetDataEl" label="Radio Group" has-none>
  <div>
    <ins-radio label="Option 1" value="1"></ins-radio>
    <ins-radio label="Option 2" value="2"></ins-radio>
  </div>
</ins-radio-group>


<script>
  var dsv = document.getElementById('directSetDataEl')
  dsv.addEventListener('didLoad', function(e){
    dsv.setValue("1");
  });
</script>