Checkbox

版本要求:
@ray-js/ray≥0.5.10

描述

多选框，用于在选项列表中开启或关闭单项选择。

属性

属性类型必填默认值说明
valuestring否-选中时触发所属 checkbox-group 的 change 事件，并携带该 value
checkedboolean否false当前是否选中，可作默认选中
disabledboolean否false是否禁用
colorstring否#007AFF多选框颜色，同 CSS color

示例代码

基础用法

import React from 'react';
import { Checkbox, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Checkbox checked />
    </View>
  );
}

不同状态

import React from 'react';
import { Checkbox, View, Text } from '@ray-js/ray';

export default function () {
  const [checked, setChecked] = React.useState(false);

  return (
    <View style={{ padding: '20px' }}>
      <View style={{ marginBottom: '10px' }}>
        <Text>默认状态：</Text>
        <Checkbox />
      </View>
      <View style={{ marginBottom: '10px' }}>
        <Text>选中状态：</Text>
        <Checkbox checked />
      </View>
      <View style={{ marginBottom: '10px' }}>
        <Text>禁用状态：</Text>
        <Checkbox disabled />
      </View>
      <View style={{ marginBottom: '10px' }}>
        <Text>自定义颜色：</Text>
        <Checkbox color="#ff0000" checked />
      </View>
    </View>
  );
}