CheckBox

Overview

Number	Description
1	Icon when the item is selected
2	Label of an item
3	Not selected item
4	Disabled item

Constructor

Parameter

Name	Type	Required	Description
options	Object	No	The object contains params of constructor.
options.items	Array<Object>	No	List of items which will be displayed on checkbox.
options.items[].value	String	Yes	String value of item If the value is duplicate, the error message will be displayed
options.items[].label	String	No	String label of item
options.items[].isDisabled	Boolean	No	Indicate item will be disabled when display. Default value is false.
options.value	Array	No	List of checked item.
options.isDisabled	Boolean	No	The checkBox will be disabled. Default value: 'false'
options.isVisible	Boolean	No	The checkBox will be visible. Default value: 'true'

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items, value: ['Orange']};
    }

    render() {
        return (
            <CheckBox items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
        );
    }
}

Methods

render()

Get dom element of component.

Parameter

None

Returns

Dom element

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items, value: ['Orange']};
    }

    render() {
        return (
            <CheckBox items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
        );
    }
}

addItem(item)

Add an item to the end of checkbox list.

Parameter

Name	Type	Required	Description
item	String	Yes	The item will be added to multile choices list.
item.value	String	Yes	The value of an item.
item.label	String	No	Display string.
item.isDisabled	Boolean	No	Indicate item will be disabled when display. Default value: 'false'

Returns

None

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

checkbox.addItem({
    label: 'Grape',
    value: 'grape',
    isDisabled: false
});

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: []
        }
    }

    render() {
        return (
        <div>
          <CheckBox items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Add Item</button>
        </div>
      );
    }

    handleClick = () => {
      const item = {
        label: 'Lemon',
        value: 'Lemon',
        isDisabled: false
      };
      this.setState(prevState => ({
        items: prevState.items ? prevState.items.concat([item]) : [item]
      }))
    }
}

getItem(index)

Get the value of specific position in checkbox list.

Parameter

Name	Type	Required	Description
index	Integer	Yes	The position of retrieved item.

Returns

The item at given position.

Name	Type	Description
item	String	the item of the checkbox
item.value	String	The value of an item.
item.label	String	Display string.
item.isDisabled	Boolean	Indicate item will be disabled when display.

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

var firstItem = checkbox.getItem(0);
console.log(firstItem);

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [
                {
                    label: 'Orange',
                    value: 'Orange',
                    isDisabled: false
                },
                {
                    label: 'Banana',
                    value: 'Banana',
                    isDisabled: true
                },
                {
                    label: 'Lemon',
                    value: 'Lemon',
                    isDisabled: true
                }
            ]
        };
    }

    render() {
        return (
        <div>
          <CheckBox items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Get Item</button>
        </div>
      );
    }

    handleClick = () => {
        console.log(this.state.items[0])
    }
}

removeItem(index)

Remove the specific item from checkbox list.

Parameter

Name	Type	Required	Description
index	Integer	Yes	The position of retrieved item.

Returns

None

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

checkbox.removeItem(0);

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [
                {
                    label: 'Orange',
                    value: 'Orange',
                    isDisabled: false
                },
                {
                    label: 'Banana',
                    value: 'Banana',
                    isDisabled: true
                },
                {
                    label: 'Lemon',
                    value: 'Lemon',
                    isDisabled: true
                }
            ]
        };
    }

    render() {
        return (
        <div>
          <CheckBox items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Remove Item</button>
        </div>
      );
    }

    handleClick = () => {
      this.setState(prevState => {
        if (prevState.items[0]) {
              if (this.state.value ) {
                  prevState.value = prevState.value.filter(value => value !== prevState.items[0].value)
              }
              prevState.items.splice(0, 1)
             return prevState;
            }
            return prevState;
      });
    };
}

getItems()

Get all items from the checkbox.

Parameter

None

Returns

The list contains all items of the dropdown.

Name	Type	Description
items	Array<Object>	List items of the checkbox
items[].value	String	The value of an item.
items[].label	String	Display string.
items[].isDisabled	Boolean	Indicate item will be disabled when display.

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

var items = checkbox.getItems();
items.forEach(function(item) {
    console.log(item.value + ':' + item.isDisabled);
});

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
        <div>
          <CheckBox items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Get Items</button>
        </div>
      );
    }

    handleClick = () => {
        this.state.items.forEach(item => {
            console.log(item);
        });
    }
}

getValue()

Get the checked values of the checkbox.

Parameter

None

Returns

List of checked items.

Name	Type	Description
value	List<String>	The value of selected items.

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

var value = checkbox.getValue();
value.forEach(function(item) {
    console.log(item);
});

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
        <div>
          <CheckBox items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Get Values</button>
        </div>
      );
    }

    handleClick = () => {
       console.log(this.state.value);
    }
}

setValue(value)

Set the checked value of checkbox.

Parameter

Name	Type	Required	Description
value	Array<String>	Yes	The array contains checked value in list. If the 'value[]' is nonexistent value, the error will be displayed

Returns

None

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

checkbox.setValue(['Lemon']);

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items, value: []};
    }

    render() {
        return (
        <div>
          <CheckBox items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Set Value</button>
        </div>
      );
    }

    handleClick = () => {
        this.setState({
            value: this.state.value.concat(['Lemon'])
        });
    }
}

disableItem(value)

Set the disabled item of checkbox.

Parameter

Name	Type	Required	Description
value	Array	Yes	The array contains checked value in list.

Returns

None

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

checkbox.disableItem('Orange');

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
        <div>
          <CheckBox items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Disable item</button>
        </div>
      );
    }

    handleClick = () => {
        const items = [...this.state.items];

        items[0].isDisabled = true;
        this.setState({ items: items });
    }
}

enableItem(value)

Set the enable item of checkbox.

Parameter

Name	Type	Required	Description
value	Array	Yes	The array contains checked value in list.

Returns

None

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

checkbox.enableItem('Banana');

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
        <div>
          <CheckBox items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}} />
          <button onClick={this.handleClick}>Click</button>
        </div>
        );
      }

    handleClick = () => {
        const items = [...this.state.items];

        items[1].isDisabled = false;
        this.setState({ items: items });
    }
}

on(eventName, callBack)

Register callback for change event

Parameter

Name	Type	Required	Description
eventName	String	Yes	Name of event: 'change'
callback	function	Yes	callback

Returns

None

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

checkbox.on('change', function(value) {
    console.log('on change');
});

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
            <CheckBox value={this.state.value} items={this.state.items} onChange={this.handleChange} />
        );
    }

    handleChange= () => {
        const items = [...this.state.items];

        items[1].isDisabled = false;
        this.setState({ items: items });
    }
}

show()

Display the checkbox.

Parameter

None

Returns

None

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

checkbox.show();

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
            <CheckBox value={this.state.value} isVisible={true} items={this.state.items} onChange={(value) => {this.setState({value})}}/>
        );
    }
}

hide()

Hide the checkbox.

Parameter

None

Returns

None

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

checkbox.hide();

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
            <CheckBox value={this.state.value} isVisible={false} items={this.state.items} onChange={(value) => {this.setState({value})}}/>
        );
    }
}

disable()

Disabled the checkbox.

Parameter

None

Returns

None

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

checkbox.disable();

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
            <CheckBox isDisabled={true} items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}}/>
        );
    }
}

enable()

Enabled the checkbox.

Parameter

None

Returns

None

Sample

Javascript

var checkbox = new kintoneUIComponent.CheckBox ({
       items: [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
     ],
     value: ['Orange', 'Banana']
});

var body = document.getElementsByTagName('BODY')[0];
body.appendChild(checkbox.render());

checkbox.enable();

React

import { CheckBox } from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
    constructor(props) {
        super(props);
        const items = [
            {
                label: 'Orange',
                value: 'Orange',
                isDisabled: false
            },
            {
                label: 'Banana',
                value: 'Banana',
                isDisabled: true
            },
            {
                label: 'Lemon',
                value: 'Lemon',
                isDisabled: true
            },
        ];
        this.state = {items: items};
    }

    render() {
        return (
            <CheckBox isDisabled={false} items={this.state.items} value={this.state.value} onChange={(value) => {this.setState({value})}}/>
        );
    }
}