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:
|
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})}}/>
);
}
}