Extend input element in code

Amplify Studio Forms are all based on top of the Amplify UI library. The generated form provides a mechanism to override properties for each individual input component.

Dynamically modify specific input properties

Use the overrides property to select the input component you want to override and then pass in the props that you'd like to change. For example, we want to dynamically toggle the descriptive text of a particular form element:

function ProductFormContainer({ productType }) {
  return (
    <div className="App">
      <ProductForm
        overrides={{
          name: {
            descriptiveText: `Enter ${productType} name`
          }
        }}
      />
    </div>
  );
}

Note: We do not recommend overriding properties that are already set by the generated form. This could lead to unexpected behavior during runtime. Verify the set properties by navigating to the component in the src/ui-components/<your-form-component>.jsx file.