Element: <ins-checkbox-group>
Used for grouping of ins-checkbox component.
Code Snippet
<ins-checkbox-group label="Checkbox Group" tooltip="This is a sample tooltip content. It also support html content."> <div> <ins-checkbox label="Option 1" value="1"></ins-checkbox> <ins-checkbox label="Option 2" value="2"></ins-checkbox> </div> </ins-checkbox-group>
Code Snippet
<ins-checkbox-group label="Description Example" html-description description="This is a <strong>Description</strong> <i>Example</i>"> <div> <ins-checkbox label="Option 1" value="1"></ins-checkbox> <ins-checkbox label="Option 2" value="2"></ins-checkbox> </div> </ins-checkbox-group>
Code Snippet
<ins-checkbox-group label="Checkbox Group Error" has-error> <div> <ins-checkbox label="Option 1" value="1"></ins-checkbox> <ins-checkbox label="Option 2" value="2"></ins-checkbox> </div> </ins-checkbox-group>
Code Snippet
<ins-checkbox-group label="Checkbox Group Disabled" disabled> <div> <ins-checkbox label="Option 1" value="1"></ins-checkbox> <ins-checkbox label="Option 2" value="2"></ins-checkbox> </div> </ins-checkbox-group>
Code Snippet
<ins-checkbox-group label="Checkbox Group Horizontal" horizontal> <div> <ins-checkbox label="Option 1" value="1"></ins-checkbox> <ins-checkbox label="Option 2" value="2"></ins-checkbox> <ins-checkbox label="Option 3" value="3"></ins-checkbox> <ins-checkbox label="Option 4" value="4"></ins-checkbox> </div> </ins-checkbox-group>
Code Snippet
<ins-checkbox-group id="directSetDataEl" label="Checkbox Group"> <div> <ins-checkbox label="Option 1" value="1"></ins-checkbox> <ins-checkbox label="Option 2" value="2"></ins-checkbox> <ins-checkbox label="Option 3" value="3"></ins-checkbox> <ins-checkbox label="Option 4" value="4"></ins-checkbox> </div> </ins-checkbox-group> <script> var dsv = document.getElementById('directSetDataEl') dsv.addEventListener('didLoad', function(e){ dsv.setValue(["1", "4"]); }); </script>
FIELD ATTRIBUTE | TYPE | DEFAULT | OPTIONS | DESCRIPTION |
---|---|---|---|---|
label | string | any | Defines label of checkbox group | |
disabled | boolean | false | true, false | Disables checkbox group field |
readonly | boolean | false | true, false | Specifies that the checkbox group field is read-only |
value | array | any | Defines value of checkbox group field | |
has-error | boolean | false | true, false | Specifies validation or mandatory input for the checkbox group field |
error-message | string | - | any | Defines the error message of the checkbox group field |
horizontal | boolean | false | true, false | Defines if the checkbox group field horizontal orientation |
tooltip | string | - | any | Defines the tooltip of checkbox group field |
html-description | boolean | false | true, false | Enables HTML tags in the description |
description | string | "" | any | Defines the description value |
EVENT | OBJECT | DESCRIPTION |
---|---|---|
insInput | value | Emits the value of the selected radio field |
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.