Insites Docs Web Components V2Data EntryRadio Group

Radio Group

Last updated on January 06, 2025.

Element: <ins-radio-group>

Used for grouping of ins-radio component.

Complete Example

Code Snippet

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

Code Snippet

<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

Code Snippet

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

Code Snippet

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

Code Snippet

<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>
Direct Set Data

Code Snippet

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

 

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