Checkbox

Checkbox is a single check box.

Basic Usage

import { Checkbox, Utils } from 'tuya-panel-kit'

const { convertX: cx } = Utils.RatioUtils;

const [checked, setChecked] = React.useState(false);

<Checkbox
  color="#F84803"
  checked={checked.checked1}
  onChange={value => setChecked({ checked1: value })}
>
  Checkbox1
</Checkbox>
<Checkbox
  color="#F84803"
  checked={checked.checked2}
  style={{ marginTop: cx(8) }}
  onChange={value => setChecked({ checked2: value })}
>
  Checkbox2
</Checkbox>

disable status

import { Checkbox, Utils } from 'tuya-panel-kit'

const { convertX: cx } = Utils.RatioUtils;

<Checkbox color="red" checked={true} disabled={true}>
  Checkbox
</Checkbox>
<Checkbox checked={false} disabled={true} style={{ marginTop: cx(8) }}>
  Checkbox
</Checkbox>

Custom color and size

import { Checkbox, Utils } from 'tuya-panel-kit'

const { convertX: cx } = Utils.RatioUtils;

const [checked, setChecked] = React.useState(false);

<Checkbox
  size={cx(22)}
  color="#3BEB56"
  checked={checked.checked1}
  onChange={value => setChecked({ checked1: value })}
>
  Checkbox1
</Checkbox>
<Checkbox
  size={cx(22)}
  color="#3BEB56"
  checked={checked.checked2}
  style={{ marginTop: cx(8) }}
  onChange={value => setChecked({ checked2: value })}
>
    Checkbox2
</Checkbox>

Tuya Design

Checkbox

Basic Usage

disable status

Custom color and size

API