Checkbox Group

Documentation

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the checkbox group
var el = document.querySelector("#checkboxGroup");
var cbGroup = Components.CheckboxGroup({
    el: el,
    items: [
        { label: "Option 1" },
        { label: "Option 2" },
        { label: "Option 3" }
    ]
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the buttonGroup
let el = document.querySelector("#cbGroup");
let cbGroup = Components.CheckboxGroup({
    el: el,
    items: [
        { label: "Option 1" },
        { label: "Option 2" },
        { label: "Option 3" }
    ]
});

Web Component

// Return the checkbox group properties return { items: [ { label: "Option 1" }, { label: "Option 2" }, { label: "Option 3" } ] }
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-checkbox-group>
    // Return the checkbox group properties
    return {
        items: [
            { label: "Option 1" },
            { label: "Option 2" },
            { label: "Option 3" }
        ]
    }
</bs-checkbox-group>

References

CheckboxGroup(props:ICheckboxGroupProps):ICheckboxGroup

ICheckboxGroup

Name Returns Description
el Element The jquery element.
getValue () => ICheckboxGroupItem | Array<ICheckboxGroupItem> Returns the selected items.

ICheckboxGroupProps

Name Type Description
className string The class name to apply to button group.
colSize number The size of the column.
el HTMLElement The element to render the button group to.
hideLabel boolean Flag to hide the label.
label string The aria-label property value.
items ICheckboxGroupItem The checkbox items.
multi boolean Flag to allow multiple selections.
onChange (items:Array<ICheckboxGroupItem>) => void Event triggered when a checkbox is clicked.
type string The checkbox item type.

ICheckboxGroupItem

Name Type Description
data any The data object associated with the item.
isDisabled boolean Flag to disable the item.
isSelected boolean Flag indicating the item is selected.
label string The checkbox label.
name string The name of the checkbox.
onChange (item) => void The on change event.