Feedback Form Widget

A TypeScript React widget for collecting support feedback with inline validation, live counters, and clear submission states.

Capabilities

Collects contact info and message

• Renders labeled email and message fields plus an "Include screenshot" checkbox that defaults to unchecked; submit remains disabled until both text fields are non-empty. @test

Shows validation errors

• Submitting with empty required fields shows inline error text beside each empty field and keeps focus on the first invalid input. @test

Tracks character count

• The message textarea enforces a 200-character limit and surfaces a live counter as visible text like 12/200 that updates as the user types. @test

Handles async submission state

• Clicking submit calls the provided async submit handler with { email, message, includeScreenshot }, disables inputs while pending, and shows a "Sending..." status. When the promise resolves, inputs re-enable, fields clear, and a confirmation text "Thanks for your feedback!" appears. @test
• If the submit handler rejects, inputs re-enable and an error banner text “Something went wrong. Try again.” is displayed without clearing the form. @test

Implementation

@generates

API

export type FeedbackFormProps = {
  onSubmit: (data: { email: string; message: string; includeScreenshot: boolean }) => Promise<void>;
};

export function FeedbackForm(props: FeedbackFormProps): JSX.Element;

Dependencies { .dependencies }

react { .dependency }

React for building components.

jest with React Testing Library { .dependency }

Prewired test runner and DOM querying utilities for React component tests.

@testing-library/user-event { .dependency }

User interaction simulation for typing, tabbing, and clicking in tests.