preact · Preact Docs
Preact Forms
Teaches how to implement forms in Preact using both class-based and hooks-based components, covering basic controls like text inputs, checkboxes, radio buttons, and selects, as well as the distinction between controll...
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Preact Forms
Teaches how to implement forms in Preact using both class-based and hooks-based components, covering basic controls like text inputs, checkboxes, radio buttons, and selects, as well as the distinction between controll...
When To Use
Use when you need to implement user input fields, manage form state in Preact, or decide between controlled and uncontrolled component patterns for form elements.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/preact-forms-workflow-guide.md | A comprehensive guide covering essentials, debugging, testing, and advanced usage of forms in Preact. | Questions about a comprehensive guide covering essentials, debugging, testing, and advanced usage of forms in Preact. |
examples/preact-forms-basic-input-component.text | A code example demonstrating a basic controlled input component using Preact state and the onInput event handler. | Exact payloads, commands, or snippets shown in A code example demonstrating a basic controlled input component using Preact state and the onInput event handler. |
examples/preact-forms-basic-input-component-2.text | A functional React-style component demonstrating basic state management for a text input field using the useState hook. | Exact payloads, commands, or snippets shown in A functional React-style component demonstrating basic state management for a text input field using the useState hook. |
examples/preact-forms-basic-radio-button-component.text | A Preact component implementation demonstrating state management for a radio button group within a form. | Exact payloads, commands, or snippets shown in A Preact component implementation demonstrating state management for a radio button group within a form. |
examples/preact-forms-basic-radio-button.text | A functional Preact component demonstrating how to manage radio button state using the useState hook. | Exact payloads, commands, or snippets shown in A functional Preact component demonstrating how to manage radio button state using the useState hook. |
examples/preact-forms-select-component.text | A Preact component example demonstrating how to manage select element state using a class-based component and onChange handler. | Exact payloads, commands, or snippets shown in A Preact component example demonstrating how to manage select element state using a class-based component and onChang... |
examples/preact-forms-select-component-2.text | A code example demonstrating how to implement a controlled select component using the useState hook in Preact. | Exact payloads, commands, or snippets shown in A code example demonstrating how to implement a controlled select component using the useState hook in Preact. |
examples/preact-forms-component-state-submission.text | A Preact component demonstrating how to manage form state and handle submission using the FormData API. | Exact payloads, commands, or snippets shown in A Preact component demonstrating how to manage form state and handle submission using the FormData API. |
examples/preact-forms-fullname-component.text | A React-style functional component demonstrating how to handle form submission and state updates using FormData in Preact. | Exact payloads, commands, or snippets shown in A React-style functional component demonstrating how to handle form submission and state updates using FormData in Pr... |
examples/preact-forms-uncontrolled-component.text | A text example demonstrating how to implement uncontrolled form components in Preact where the library does not manage the input value. | Exact payloads, commands, or snippets shown in A text example demonstrating how to implement uncontrolled form components in Preact where the library does not manag... |
examples/preact-forms-controlled-component.text | A text-based code example demonstrating a controlled form component where Preact manages the input value. | Exact payloads, commands, or snippets shown in A text-based code example demonstrating a controlled form component where Preact manages the input value. |
examples/preact-forms-controlled-input-handler.text | A code example demonstrating how to implement a controlled input component using an onInput event handler in Preact. | Exact payloads, commands, or snippets shown in A code example demonstrating how to implement a controlled input component using an onInput event handler in Preact. |
examples/preact-forms-limited-input-component.text | A Preact component implementation demonstrating how to restrict input length using state and refs. | Exact payloads, commands, or snippets shown in A Preact component implementation demonstrating how to restrict input length using state and refs. |
examples/preact-forms-limited-input-component-2.text | A Preact component example demonstrating how to implement an input field with a character limit using useState and useRef hooks. | Exact payloads, commands, or snippets shown in A Preact component example demonstrating how to implement an input field with a character limit using useState and us... |
What This Skill Covers
- Guide Version: 11.x (preview) 10.x (current) 8.x
- Main sections:
Introduction,Essentials,Debug & Test,Advanced,Libraries.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://preactjs.com/guide/v10/forms