Accessible Form Component Library Starter
Build form building blocks that are accessible by default.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
Build the starter of a form component library that is accessible by default. Framework and language: [FRAMEWORK_AND_LANGUAGE]. Components needed: [COMPONENTS] (for example text input, select, checkbox group, radio group, date field, error summary). Design system tokens: [DESIGN_TOKENS]. Use this checklist as the acceptance criteria and implement against it. After the code, confirm each item with evidence from your code: [ ] Each component renders a real label tied to its control; label is a required prop [ ] Hint text and error text linked with describedby; error state sets the invalid state [ ] Required state shown visually and programmatically [ ] Group controls use fieldset and legend [ ] Native elements used when they exist; custom widgets follow documented patterns with keyboard support [ ] Visible focus on every interactive element, with contrast that meets the standard [ ] Touch targets at least 44 pixels [ ] Autocomplete and input type props supported [ ] Error summary component that moves focus and links to fields [ ] Disabled and read-only states are distinguishable and do not rely on color alone [ ] Works with 200 percent zoom and in forced-colors mode [ ] No ids collide when components repeat (generated ids) Deliver the code for three components, shared utilities, a usage example for a complete form with validation, and tests with an accessibility checker plus a manual keyboard test script.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.