form-checkbox-usage

Render accessible labeled checkboxes with validation using FormCheckbox and ZagJS.

2|Updated Dec 2, 2024
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill form-checkbox-usage
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: form-checkbox-usage
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/form-checkbox-usage
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill form-checkbox-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use FormCheckbox to create labeled checkbox UX with proper state handling, help text, and validation for Zag.js-enabled apps.

Core Features & Use Cases

  • Labeled checkbox UI with label, help text, error/status indicators, and accessibility.
  • Support for indeterminate state for partial selections and controlled checked state.
  • Consistent integration with @techsio/ui-kit FormCheckbox and ZagJS for predictable behavior.

Quick Start

Import the FormCheckbox component and render it with name and label to display a labeled checkbox with optional help text.

Frequently Asked Questions about form-checkbox-usage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an accessible labeled checkbox in React with validation?▼

You create an accessible labeled checkbox in React by using a FormCheckbox component that integrates ZagJS to handle state, label, help text, and validation status consistently across enabled or disabled contexts.

What is the indeterminate state and when do I need it for checkbox UI?▼

The indeterminate state represents a partial selection in a checkbox UI. You need it when a parent checkbox controls a group of child checkboxes, and only some of the children are currently checked, indicating an incomplete selection state.

Does this checkbox component work with ZagJS for state management?▼

Yes, the FormCheckbox component requires and leverages ZagJS integration to ensure predictable behavior, consistent rendering, and proper state management for controlled checked and indeterminate states.

How do I add help text and error status to a form checkbox?▼

To add help text and error status to a form checkbox, use the provided helpText prop and built-in validation indicators. This renders consistent error or status messages alongside the labeled checkbox for accessible user feedback.

Can I use this labeled checkbox in a disabled form context?▼

Yes, you can use this labeled checkbox in a disabled form context. The component is designed to render consistently across both enabled and disabled contexts, maintaining proper accessibility and state handling.