Checkbox

Checkbox is radio boxes. It is a component that provides selection function.

Code demo

Note: for more information, see Checkbox Demo.

import React, { Component } from "react";
 import { View } from "react-native";
 import { Checkbox } from "tuya-panel-kit";
 
export default class CheckboxScene extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
      disabled: false,
    };
  }
 
 _handleChange = (checked) => {
    this.setState({ checked });
  };
 
 render() {
    return (
      <View>
        <Checkbox
          checked={this.state.checked}
          disabled={this.state.disabled}
          onChange={(checked) => this.setState({ checked })}
        >
          Click to select
        </Checkbox>
        <Checkbox
          color="red"
          checked={this.state.disabled}
          hideOnUnselect={true}
          onChange={(disabled) => this.setState({ disabled })}
        >
          Click to disable the above
        </Checkbox>
      </View>
    );
  }
 }

API

style

Checkbox style.

size

Checkbox icon size.

disabled

Whether to disable or not.

disabledColor

Icon color when unchecked.

checked

Whether it is checked or not.

checkedIcon

The checked icon path.

unCheckedIcon

The unchecked icon path.

reverse

Whether to reverse the position of the checkbox icon and child elements.

hideOnUnselect

Whether to hide the unselected icon.

color

checkbox icon color.

onChange

checkbox change event.

children

The child element of checkbox. It is usually text.