English
English
简体中文
Contact Us
Register
Log In
layoutIndex

Checkbox

Last Updated on : 2022-03-01 07:55:01download

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.

Type Required
ViewPropTypes.style No

size

Checkbox icon size.

Type Required Default value
number No 28

disabled

Whether to disable or not.

Type Required Default value
boolean No false

disabledColor

Icon color when unchecked.

Type Required Default value
ColorPropType No null

checked

Whether it is checked or not.

Type Required Default value
boolean No false

checkedIcon

The checked icon path.

Type Required Default value
string No null

unCheckedIcon

The unchecked icon path.

Type Required Default value
string No null

reverse

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

Type Required Default value
boolean No false

hideOnUnselect

Whether to hide the unselected icon.

Type Required Default value
boolean No false

color

checkbox icon color.

Type Required Default value
ColorPropType No #44DB5E

onChange

checkbox change event.

Type Required Default value
(checked) => void No null

children

The child element of checkbox. It is usually text.

Type Required Default value
any No null