build-interactive-forms

name	build-interactive-forms
description	Use when constructing forms, inputs, submit behaviors, validation displays, and feedback toast alerts.

Build Interactive Forms Playbook

Ensure all input grids and form components are clear, accessible, and provide immediate interactive user feedback:

1. Primitive Form Fields:

   • Always use the <FormField> component. It wraps label, input element, and validation warning messages:

     <FormField
       label="Diamond Weight (Carats)"
       name="carat"
       type="number"
       step="0.01"
       placeholder="e.g. 1.25"
       value={formData.carat}
       onChange={handleChange}
       error={errors.carat}
       disabled={submitting}
     />
     

2. Loading / Submitting States:

   • Disable all inputs and button elements when form requests are processing (submitting state).
   • Display a spinner or "Processing..." text inside the submit button.

3. Validation & Toast Alerts:

   • Always validate inputs client-side before sending requests (e.g. checking length or empty inputs).
   • On successful save operations, display a green success notification:

     toast("Diamond record created successfully!", "success");
     

   • On failure, show red error indicators and do not reset inputs:

     toast(error.message || "Failed to create record", "error");