English | 简体中文
- 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.
npm install @rc-component/checkboximport 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);
}}
/>
);
}Run the local dumi site:
npm install
npm startThen open http://localhost:8000.
| 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.
| 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 |
npm install
npm startThe dumi site runs at http://localhost:8000 by default.
npm test
npm run tsc
npm run lint
npm run compile
npm run buildnpm run prepublishOnlyThe release flow is handled by @rc-component/np through the rc-np command after the package build.
@rc-component/checkbox is released under the MIT license.