export const meta = {
  title: 'Customize input element in code',
  description:
    "Use the \"overrides\" property to override any form input's properties. Use this as an escape hatch in case there's a property that you can't customize within Studio."
};

Amplify Studio Forms are all based on top of the [Amplify UI library](https://ui.docs.amplify.aws/). 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:

```jsx
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.