Customize form inputs

In this guide, you will learn how to customize connected forms that are generated by running npx ampx generate forms. Before you begin you will need:

Your cloud sandbox with an Amplify Data resource up and running (npx ampx sandbox)
A frontend application that has generated a connected form

All Amplify forms are built with the Amplify UI library. The generated form provides a mechanism to override properties for each individual input component, like TextField, TextAreaField, SelectField. You can override any props to those components with the overrides prop on the form component. For example, if you want to change the variation and label of the content field in the TodoCreateForm:

1import TodoCreateForm from '@/ui-components/TodoCreateForm'
2
3<TodoCreateForm
10/>

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.

You own updating the code directly for the generated form. Here's how you can customize the form.

Manually add form input field

You can manually add a form input connected to a data model to the generated form. For example, let's say you add a priority field to your data model. Make the following edits to the generated form:

src/ui-components/TodoCreateForm.js

1// 1. Set initialValues
2  const initialValues = {
3    content: "",
5  };
6
7  // 2. State setup
8  const [priority, setPriority] = React.useState(initialValues.priority);
9
10  // 3. Update resetValues
11  const resetStateValues = () => {
12    .. // previous fields
14    setErrors({});
15  };
16
17  // 4. Validation setup
18  const validations = {
19    content: [],
21  };
22
23  // 5. Update form submission
24   onSubmit={async (event) => {
25        event.preventDefault();
26        let modelFields = {
27          ..,
29        };
30
31  // 6. Add TextField
32  <TextField
33     label="Priority"
34     isRequired={false}
35     isReadOnly={false}
36     value={priority}
37     onChange={(e) => {
38       let { value } = e.target;
39       if (onChange) {
40         const modelFields = {
41           priority: value,
42         };
43         const result = onChange(modelFields);
44         value = result?.priority ?? value;
45       }
46       if (errors.priority?.hasError) {
47         runValidationTasks("priority", value);
48       }
49       setPriority(value);
50     }}
51     onBlur={() => runValidationTasks("priority", priority)}
52     errorMessage={errors.priority?.errorMessage}
53     hasError={errors.priority?.hasError}
54     {...getOverrideProps(overrides, "priority")}
55   />

Manually add option fields

Select Fields, Radio Group Fields, and Autocomplete Fields require a set of options for your users to choose from. For example, a "Status" input can only have the options "Not started", "In progress", and "Done". This would be identical to the above 6 steps, but in step 6 you would replace <TextField> with <SelectField>

src/ui-components/TodoCreateForm.js

1// 6. Import <SelectField> component and add to form return
2  <SelectField
3    label="Label" 
4    placeholder="Please select an option" 
5    value={status} 
6    onChange={(e) => {
7      let { value } = e.target;
8      if (onChange) {
9          const modelFields = {
10              status: value
11          };
12          const result = onChange(modelFields);
13          value = result?.status ?? value;
14      }
15      if (errors.status?.hasError) {
16          runValidationTasks("status", value);
17      }
18      setStatus(value);
19      }} 
20      onBlur={() => runValidationTasks("status", status)}
21      errorMessage={errors.status?.errorMessage} 
22      hasError={errors.status?.hasError} 
23      {...getOverrideProps(overrides, "status")}
24    >
25      <option children="Not started" value="Not started" {...getOverrideProps(overrides, "statusOption0")}></option>
26      <option children="In progress" value="In progress" {...getOverrideProps(overrides, "statusOption1")}></option>
27      <option children="Done" value="Done" {...getOverrideProps(overrides, "statusOption2")}></option>
28  </SelectField>

Configure form spacings (paddings and gaps)

Add spacing to your form and between inputs. Spacing values can either be a CSS length value (px, rem, em, %) or a reference to your theme object's spacing value (xss, medium, large).

1import TodoCreateForm from '@/ui-components/TodoCreateForm'
2
3<TodoCreateForm overrides={{
9}} />

Customize label for Submit and Clear buttons

You can customize action button labels to better describe your form's use case, such as changing Submit to Create Todo.

1import TodoCreateForm from '@/ui-components/TodoCreateForm'
2
3<TodoCreateForm overrides={{
10}} />

Toggle visibility for Submit and Clear buttons

You can customize the visibility of action buttons to better accommodate your form's use case.

1import TodoCreateForm from '@/ui-components/TodoCreateForm'
2
3<TodoCreateForm overrides={{
10}} />

If you hide all form action buttons, you can still leverage the onChange event handler to self-manage the form lifecycle. This is useful for a form that updates data in real-time without explicit user confirmation.

1import TodoCreateForm from '@/ui-components/TodoCreateForm'
2
3<TodoCreateForm
9/>

Configure special inputs