component-input

You can generate accessible React input components by running the skill with your desired input type, label id, and validation state. It produces input.tsx files with consistent aria-describedby wiring for error and hint messages.

Wiring aria-describedby for error and hint text is handled automatically by the generated input component. You provide the errorMessage and hintText props, and the component links them via aria-describedby for screen reader accessibility.

Building a controlled React input with Enter key handling requires passing the value and onChange props during generation. The component supports an onEnter keyboard interaction to execute logic when the Enter key is pressed.

Disabled and read-only accessibility patterns are fully supported during component generation. It implements accessible disabled behavior using aria-disabled and applies the correct ARIA attributes for readOnly states.

You can use this skill to scaffold React inputs with SCSS styling modules. It generates both the input.tsx component logic and the accompanying input.module.scss file following fpkit/acss styling patterns.