component-checkbox

What problem does it solve?

It eliminates the repetitive work of implementing accessible checkbox UI by generating an fpkit-compatible Checkbox component with correct semantics, validation passthrough, and styling hooks.

Core Features & Use Cases

• Accessible behavior out of the box: Renders a native checkbox input wrapped with a programmatically associated label (id + htmlFor) and supports aria-required, aria-invalid, and disabled accessibility patterns.
• Indeterminate-ready API via validation passthrough: Delegates validation, disabled, and ARIA logic to the kit Input foundation while presenting a boolean onChange ergonomics for app code.
• Drop-in theming and sizing: Includes SCSS with CSS custom properties for size variants and focus ring/contrast tuning.
• Use case: You need a reliable checkbox for a React + TypeScript + Sass form (including required and error states) and want it to match fpkit/acss conventions without adding a runtime package.

Quick Start

Generate the Checkbox by asking the AI to scaffold an fpkit-style accessible checkbox with label, choose checked or indeterminate initial state, specify whether it should be controlled or uncontrolled, and include required/invalid messaging if applicable.