Checkbox

havok/form/Checkbox provides nicely styled checkbox.

Example

<input data-dojo-type="havok/form/Checkbox"
    type="checkbox"
    checked
    data-dojo-props="
        label:'Checked Enabled',
        helpMessages: 'this is a checkbox'
    "
 />
<input data-dojo-type="havok/form/Checkbox"
    type="checkbox"
    data-dojo-props="
        label:'Unchecked Enabled',
        helpMessages: 'this is a checkbox'
    "
 />
<input data-dojo-type="havok/form/Checkbox"
    type="checkbox"
    checked
    disabled
    data-dojo-props="
        label:'Checked Disabled',
        helpMessages: 'this is a checkbox'
    "
 />
<input data-dojo-type="havok/form/Checkbox"
    type="checkbox"
    disabled
    data-dojo-props="
        label:'Unchecked Disabled',
        helpMessages: 'this is a checkbox'
    "
 />

Button style

Use havok/form/ToggleButton for a button style checkbox.

<input data-dojo-type="havok/form/ToggleButton"
    data-dojo-props="
        text:'Check Me',
        label: 'A checkbox',
        helpMessages: 'this is a button checkbox',
        value: true
    "
 />

Grouped Button style

Use havok/form/CheckboxGroup for a group of button style checkboxes.

<input data-dojo-type="havok/form/CheckboxGroup"
    data-dojo-props="
        label: 'A checkbox group',
        helpMessages: 'this is a checkbox group',
        value: {l: true, m: false, r: true},
        store: {
            data: [
                {id: 'l', type: 'button', text: 'left'},
                {id: 'm', type: 'button', text: 'middle'},
                {id: 'r', type: 'button', text: 'right'}
            ]
        }
    "
 />

Radio Group

Grouped Button style

Use havok/form/RadioGroup for a group of button style radios.

<input data-dojo-type="havok/form/RadioGroup"
    data-dojo-props="
        label: 'A radio group',
        helpMessages: 'this is a radio group',
        value: 'm',
        store: {
            data: [
                {id: 'l', type: 'button', text: 'left'},
                {id: 'm', type: 'button', text: 'middle'},
                {id: 'r', type: 'button', text: 'right'}
            ]
        }
    "
 />