Skip to content
Merged
Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
0a06399
chore: standardize repository setup
afc163 Jun 26, 2026
748e5c9
chore: simplify lint-staged prettier command
afc163 Jun 26, 2026
344d6fa
ci: allow surge preview status updates
afc163 Jun 26, 2026
bf5628a
chore: remove cloudflare preview and now-build
afc163 Jun 26, 2026
3b8e33b
docs: standardize README release details
afc163 Jun 26, 2026
2a1c02e
ci: make surge preview non-blocking
afc163 Jun 26, 2026
b0fc36b
ci: keep surge preview as fallback
afc163 Jun 26, 2026
67028d6
docs: refine README usage and ecosystem note
afc163 Jun 27, 2026
51519b8
ci: isolate surge preview token
afc163 Jun 27, 2026
8a14a22
docs: add Chinese README
afc163 Jun 27, 2026
b518d1b
docs: add Ant Design logo to README
afc163 Jun 27, 2026
c1df5f8
docs: refine bilingual README branding
afc163 Jun 27, 2026
c092a17
chore: standardize rc tooling and docs
afc163 Jun 27, 2026
e16b82e
chore: address standardization review comments
afc163 Jun 27, 2026
044ae19
chore: include father config in type checks
afc163 Jun 27, 2026
183257a
ci: update GitHub Actions versions
afc163 Jun 28, 2026
0b9b79f
ci: use resolvable CodeQL action ref
afc163 Jun 28, 2026
0292874
chore: ignore dumi build output
afc163 Jun 28, 2026
6f4e479
docs: add license file
afc163 Jun 28, 2026
fc97880
ci: use actions checkout v7
afc163 Jun 28, 2026
6e65c71
chore: standardize package metadata
afc163 Jun 28, 2026
c304c42
ci: standardize dependabot updates
afc163 Jun 28, 2026
487d5c8
chore: refine preview workflow ignores
afc163 Jun 28, 2026
4cc7b62
chore: add missing prettier dependency
afc163 Jun 28, 2026
695fb13
docs: document dumi dev server port
afc163 Jun 28, 2026
efca12e
chore: standardize husky configuration
afc163 Jun 28, 2026
ae19686
docs: align readme badge layout
afc163 Jun 28, 2026
d1fcbd6
chore: standardize package type entry
afc163 Jun 28, 2026
72dbb61
docs: normalize readme badges
afc163 Jun 28, 2026
afa42f5
ci: limit reusable workflow secrets
afc163 Jun 28, 2026
7715401
ci: restore reusable workflow compatibility
afc163 Jun 28, 2026
4195fb3
docs: polish zh-CN readme wording
afc163 Jun 28, 2026
56b189d
ci: narrow surge preview permissions
afc163 Jun 28, 2026
049909e
chore: limit reusable workflow secrets
afc163 Jun 29, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
github: ant-design
open_collective: ant-design
22 changes: 12 additions & 10 deletions .github/workflows/codeql.yml
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
name: "CodeQL"
name: 'CodeQL'

on:
push:
branches: [ "master" ]
branches: ['master']
pull_request:
branches: [ "master" ]
branches: ['master']
schedule:
- cron: "8 20 * * 1"
- cron: '8 20 * * 1'

jobs:
analyze:
Expand All @@ -20,22 +20,24 @@ jobs:
strategy:
fail-fast: false
matrix:
language: [ javascript ]
language: [javascript]

steps:
- name: Checkout
uses: actions/checkout@v3
uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0
with:
persist-credentials: false

- name: Initialize CodeQL
uses: github/codeql-action/init@v2
uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e
with:
languages: ${{ matrix.language }}
queries: +security-and-quality

- name: Autobuild
uses: github/codeql-action/autobuild@v2
uses: github/codeql-action/autobuild@8aad20d150bbac5944a9f9d289da16a4b0d87c1e

- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v2
uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e
with:
category: "/language:${{ matrix.language }}"
category: '/language:${{ matrix.language }}'
4 changes: 2 additions & 2 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@ name: ✅ test
on: [push, pull_request]
jobs:
test:
uses: react-component/rc-test/.github/workflows/test.yml@main
secrets: inherit
uses: react-component/rc-test/.github/workflows/test-utoo.yml@main
secrets: inherit
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
27 changes: 27 additions & 0 deletions .github/workflows/react-doctor.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
name: React Doctor

on:
pull_request:
types: [opened, synchronize, reopened, ready_for_review]
push:
branches: [master]

permissions:
contents: read
pull-requests: write
issues: write
statuses: write

concurrency:
group: react-doctor-${{ github.event.pull_request.number || github.ref }}
cancel-in-progress: true

jobs:
react-doctor:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0
with:
fetch-depth: 0
persist-credentials: false
- uses: millionco/react-doctor@0b4f4f4bd248a154e64eb508a48347f71154b3f3
38 changes: 38 additions & 0 deletions .github/workflows/surge-preview.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
name: Surge Preview

on:
pull_request:

permissions:
contents: read
pull-requests: write
checks: write
statuses: write

jobs:
preview:
runs-on: ubuntu-latest
env:
PREVIEW: true
steps:
- uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0
with:
persist-credentials: false
- name: Build preview
if: ${{ secrets.SURGE_TOKEN != '' }}
run: |
npm install
npm run build
- uses: afc163/surge-preview@bf90a5a86111f6311ca42f0a5a0f80fb0fb03cec
if: ${{ secrets.SURGE_TOKEN != '' }}
env:
SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
with:
surge_token: ${{ env.SURGE_TOKEN }}
github_token: ${{ secrets.GITHUB_TOKEN }}
dist: dist
failOnError: false
setCommitStatus: false
Comment thread
coderabbitai[bot] marked this conversation as resolved.
- name: Skip Surge preview
if: ${{ secrets.SURGE_TOKEN == '' }}
run: echo "SURGE_TOKEN is not configured; skip Surge preview."
Comment thread
coderabbitai[bot] marked this conversation as resolved.
169 changes: 93 additions & 76 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
# rc-checkbox
<div align="center">
<h1>@rc-component/checkbox</h1>
<p><sub><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /> Part of the Ant Design ecosystem.</sub></p>
<p>☑️ A small, accessible checkbox primitive for React.</p>
</div>

---
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>

Checkbox ui component for react.

<div align="center">

[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
Expand All @@ -11,102 +16,114 @@ Checkbox ui component for react.
[![bundle size][bundlephobia-image]][bundlephobia-url]
[![dumi][dumi-image]][dumi-url]

[npm-image]: http://img.shields.io/npm/v/rc-checkbox.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-checkbox
[travis-image]: https://img.shields.io/travis/react-component/checkbox/master?style=flat-square
[travis-url]: https://travis-ci.com/react-component/checkbox
[github-actions-image]: https://github.com/react-component/checkbox/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/checkbox/actions
</div>

[npm-image]: https://img.shields.io/npm/v/@rc-component/checkbox.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@rc-component/checkbox
[github-actions-image]: https://github.com/react-component/checkbox/actions/workflows/main.yml/badge.svg
[github-actions-url]: https://github.com/react-component/checkbox/actions/workflows/main.yml
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/checkbox/master.svg?style=flat-square
[codecov-url]: https://app.codecov.io/gh/react-component/checkbox
[david-url]: https://david-dm.org/react-component/checkbox
[david-image]: https://david-dm.org/react-component/checkbox/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/checkbox?type=dev
[david-dev-image]: https://david-dm.org/react-component/checkbox/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/rc-checkbox.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-checkbox
[bundlephobia-url]: https://bundlephobia.com/package/rc-checkbox
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-checkbox
[dumi-url]: https://github.com/umijs/dumi
[download-image]: https://img.shields.io/npm/dm/@rc-component/checkbox.svg?style=flat-square
[download-url]: https://npmjs.org/package/@rc-component/checkbox
[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/%40rc-component%2Fcheckbox?style=flat-square
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/checkbox
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
[dumi-url]: https://github.com/umijs/dumi

## Highlights

- Works as a controlled or uncontrolled checkbox.
- Exposes an imperative ref for focus, blur, and DOM access.
- Keeps native input attributes available while normalizing the change event.
- Ships compiled JavaScript, TypeScript definitions, and a standalone CSS asset.

## Install

[![rc-checkbox](https://nodei.co/npm/rc-checkbox.png)](https://npmjs.org/package/rc-checkbox)
```bash
npm install @rc-component/checkbox
```

## Usage

```js
import checkbox from '@rc-component/checkbox';
```tsx
import Checkbox from '@rc-component/checkbox';
import '@rc-component/checkbox/assets/index.css';

export default function App() {
return (
<Checkbox
defaultChecked
onChange={(event) => {
console.log(event.target.checked);
}}
/>
);
}
```

## Examples

export default () => <checkbox />;
```bash
npm install
npm start
```

## Compatibility
Then open `http://localhost:8000`.

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
| --- | --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Online demo: https://react-component.github.io/checkbox/

## API

<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">name</th>
<th style="width: 50px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>prefixCls</td>
<td>String</td>
<td>rc-checkbox</td>
<td></td>
</tr>
<tr>
<td>className</td>
<td>String</td>
<td>''</td>
<td>additional class name of root node</td>
</tr>
<tr>
<td>name</td>
<td>String</td>
<td></td>
<td>same with native input checkbox</td>
</tr>
<tr>
<td>checked</td>
<td>enum: 0,1,2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>defaultChecked</td>
<td>enum: 0,1,2</td>
<td>0</td>
<td>same with native input checkbox</td>
<tr>
<td>onChange</td>
<td>Function(e:Event, checked:Number)</td>
<td></td>
<td>called when checkbox is changed. e is native event, checked is original checked state.</td>
</tr>
</tbody>
</table>
### Checkbox

| Property | Description | Type | Default |
| -------------- | ------------------------------------------ | -------------------------------------- | ------------- |
| checked | Whether the checkbox is checked | boolean | - |
| className | Additional class name | string | - |
| defaultChecked | Whether the checkbox is checked by default | boolean | false |
| disabled | Whether the checkbox is disabled | boolean | false |
| name | Same as native checkbox input `name` | string | - |
| prefixCls | Component class name prefix | string | `rc-checkbox` |
| style | Inline style for the wrapper | `React.CSSProperties` | - |
| type | Native input type | string | `checkbox` |
| value | Same as native checkbox input `value` | string \| number \| readonly string[] | - |
| onChange | Callback when checked state changes | `(event: CheckboxChangeEvent) => void` | - |

Other native input attributes are also supported.

### Ref

| Property | Description | Type |
| ------------- | ------------------------------ | ---------------------------------- |
| blur | Remove focus from the checkbox | `() => void` |
| focus | Focus the checkbox | `(options?: FocusOptions) => void` |
| input | Native input element | `HTMLInputElement \| null` |
| nativeElement | Wrapper element | `HTMLElement \| null` |

## Development

```
```bash
npm install
npm start
```

Online demo: http://react-component.github.io/checkbox/
```bash
npm test
npm run tsc
npm run lint
npm run compile
npm run build
```

## Release

```bash
npm run prepublishOnly
```

The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.

## License

rc-checkbox is released under the MIT license.
@rc-component/checkbox is released under the [MIT](./LICENSE.md) license.
Loading
Loading