atomico-hooks-forms

Name: atomico-hooks-forms
Availability: InStock
Author: Atomico

Implement form-associated hooks for Atomico web components.

1.3k|44|Updated Aug 25, 2018

Search Tags:#hooks #form #web-components #form-validation #atomico #elementinternals

Ready to run

npx skills add https://github.com/atomicojs/atomico --skill atomico-hooks-forms

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: atomico-hooks-forms
Source: https://github.com/atomicojs/atomico/tree/main/.agents/skills/atomico-hooks-forms
Command: npx skills add https://github.com/atomicojs/atomico --skill atomico-hooks-forms

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Atomico form hooks streamline building accessible custom form controls by giving you a cohesive API to manage form state, validation, and submission across web components.

Core Features & Use Cases

Bidirectional form state: useFormProps and useFormValue to sync host state with FormData.
Validation and accessibility: useFormValidity integrated with ElementInternals for native browser feedback.
Form lifecycle: useFormSubmit and useFormReset to respond to user actions and reset scenarios.
Form association: useFormAssociated and useFormDisabled to handle dynamic form connections and disabled state.

Quick Start

Create a component with form: true and wire useFormProps, useFormValidity, and useFormSubmit to manage inputs and respond to submission.

Frequently Asked Questions about atomico-hooks-forms

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

FAQPage Schema

How do I make Atomico web components participate in native HTML forms?▼

You can make Atomico web components participate in native HTML forms by using form-associated hooks that bridge custom elements with native form state, validation, and submission. This Skill provides hooks to sync host state with FormData.

What is the best way to handle form validation for custom elements using ElementInternals?▼

Handling form validation for custom elements with ElementInternals involves integrating form-associated hooks to manage validity state. This Skill provides useFormValidity to connect your web component's validation logic to native browser feedback.

How do I sync web component state with FormData in Atomico?▼

To sync web component state with FormData in Atomico, you use bidirectional form state hooks like useFormProps and useFormValue. These hooks allow you to manage form state by synchronizing the host element's properties directly with FormData.

Can I manage form submission and reset events for custom elements in Atomico?▼

Yes, you can manage form submission and reset events for custom elements in Atomico. The Skill provides useFormSubmit and useFormReset hooks to respond directly to user actions and handle form reset scenarios.

Does this Skill require specific dependencies to handle form-associated custom elements?▼

No, this Skill has no external dependencies. It relies on native browser features like ElementInternals and the form directive to manage form association, disabled state, and accessibility for Atomico web components.