@aliretail/react-materials-components/demo/FormComponents/checkbox.md

B 端物料组件库

---
title: Checkbox
order: 100
---

想使用 checkbox 组请用 CheckboxGroup

| 拓展字段    | 类型     | 默认值 | 备注                                                     |
| :---------- | :------- | :----- | :------------------------------------------------------- |
| limitStrLen | `number` | -      | 截断多长的内容的 label 展示值，然后 hover 展示全 tips 的 |

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { FormComponents } from '@aliretail/react-materials-components';
const { Checkbox, SchemaForm, SchemaMarkupField: Field, createFormActions } = FormComponents;

const App = () => {
  return (
    <SchemaForm
      components={{
        Checkbox,
      }}
      defaultValue={{
        readOnly: true,
        isPreview: true,
      }}
      onChange={console.log}
    >
      <Field
        x-component="Checkbox"
        title="Simple Checkbox"
        name="Checkbox"
        x-component-props={{
          children: 'Simple Checkbox Selector',
          limitStrLen: 8,
        }}
      />
      <Field x-component="Checkbox" title="readOnly" name="readOnly" readOnly />
      <Field
        x-component="Checkbox"
        title="isPreview"
        name="isPreview"
        x-component-props={{
          checked: true,
          isPreview: true,
        }}
      >
        isPreview
      </Field>
    </SchemaForm>
  );
};

ReactDOM.render(<App />, mountNode);
```