@accessible/checkbox 中文文档教程

Question

---

<Checkbox>

npm i @accessible/checkbox

---

React 的可访问复选框组件。 这个库允许你创建 你自己的复选框有你自己的风格，同时保持能力 使用键盘聚焦并更新复选框输入。

Quick Start

查看 CodeSandbox 上的示例

```jsx 和谐 导入 {Checkbox, Checkmark}

从 '@accessible/checkbox' const MyCheckbox = () => ( <复选框名称="我的字段名称"> 检查我！ )

## API

### <Checkbox>

Creates a visually hidden checkbox input that is focusable and accessible via keyboard navigation.
All props passed to this component are applied to the `<input>`. This also creates a context
provider enabling the other components in this library to access the checkbox's state
deep in the tree.

#### Props

| Prop           | Type                        | Default     | Required? | Description                                                                                                              |
| -------------- | --------------------------- | ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------ |
| checked        | `boolean`                   | `undefined` | No        | Makes the checkbox a controlled component which can no longer be updated with `check`, `uncheck`, and `toggle` controls. |
| defaultChecked | `boolean`                   | `undefined` | No        | Set this to `true` to make the checkbox `checked` by default.                                                            |
| onChange       | `(checked: boolean) => any` | `undefined` | No        | Called each time the `checked` state changes.                                                                            |
| children       | `React.ReactNode`           | `undefined` | No        | Your custom styled checkbox.                                                                                             |

### &lt;Checkmark&gt;

A convenient component for conditionally adding class names and styles when the component is checked/unchecked.

#### Props

| Prop           | Type                  | Default     | Required? | Description                                                                            |
| -------------- | --------------------- | ----------- | --------- | -------------------------------------------------------------------------------------- |
| uncheckedClass | `string`              | `undefined` | No        | This class name will be applied to the child element when the checkbox is `unchecked`. |
| checkedClass   | `string`              | `undefined` | No        | This class name will be applied to the child element when the checkbox is `checked`.   |
| uncheckedStyle | `React.CSSProperties` | `undefined` | No        | These styles will be applied to the child element when the checkbox is `unchecked`.    |
| checkedStyle   | `React.CSSProperties` | `undefined` | No        | These styles name will be applied to the child element when the checkbox is `checked`. |
| children       | `React.ReactNode`     | `undefined` | Yes       | The child you wish to render when the checkbox is checked.                             |

### &lt;Checked&gt;

The child of this component will only render when the `<Checkbox>` is in
a `checked` state. It must be a child of a `<Checkbox>`.

#### Props

| Prop     | Type              | Default     | Required? | Description                                                |
| -------- | ----------------- | ----------- | --------- | ---------------------------------------------------------- |
| children | `React.ReactNode` | `undefined` | Yes       | The child you wish to render when the checkbox is checked. |

### &lt;Unchecked&gt;

The child of this component will only render when the `<Checkbox>` is in
an `unchecked` state. It must be a child of a `<Checkbox>`.

#### Props

| Prop     | Type              | Default     | Required? | Description                                                  |
| -------- | ----------------- | ----------- | --------- | ------------------------------------------------------------ |
| children | `React.ReactNode` | `undefined` | Yes       | The child you wish to render when the checkbox is unchecked. |

### &lt;Toggle&gt;

This component clones its child and adds an `onClick` handler to toggle the `<Checkbox>` between
`checked` and `unchecked` states. It must be a child of a `<Checkbox>`.

#### Props

| Prop     | Type              | Default     | Required? | Description                                                  |
| -------- | ----------------- | ----------- | --------- | ------------------------------------------------------------ |
| children | `React.ReactNode` | `undefined` | Yes       | The child you wish to render when the checkbox is unchecked. |

### useCheckbox()

A React hook that returns the [`CheckboxContextValue`](#checkboxcontextvalue) for the nearest `<Checkbox>` parent.

### CheckboxContextValue

打字稿 接口 CheckboxContextValue { // 复选框是否有 checked 属性？ 检查：布尔值 // 复选框当前是否获得焦点？ 重点：布尔值 // 复选框当前是否被禁用？ 禁用：布尔值 // 检查复选框 检查： () => 空白 //取消选中复选框 取消选中：() => 空白 // 切换复选框 checked 属性 切换：（）=>； 空白 } ```

LICENSE

麻省理工学院