Basic Checkbox
Simple checkbox with label
Loading state
Disable and show a spinner while submitting.
Browse components
Checkbox
Checkbox input with label, focus ring, and controlled/uncontrolled checked state.
atoms
Live example
Default usage you can copy and adapt.
Props
The props you are most likely to need, with types and defaults.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | generated | Stable id; generated when omitted |
| checked | boolean | No | false | Controlled checked state (supports bind:checked) |
| defaultChecked | boolean | No | false | Initial checked state for uncontrolled usage |
| label | string | No | — | Checkbox label |
| name | string | No | — | Input name submitted with forms |
| value | string | No | — | Input value submitted with forms |
| disabled | boolean | No | false | Disable the checkbox |
| loading | boolean | No | false | Shows a spinner and disables interaction while true |
| onChange | (event: Event) => void | No | undefined | Change handler (alias: onchange) |
| onchange | (event: Event) => void | No | undefined | Alias for onChange |