---
title: "Customize form inputs"
section: "build-ui/formbuilder"
platforms: ["javascript", "react", "nextjs"]
gen: 2
last-updated: "2024-07-30T16:49:23.000Z"
url: "https://docs.amplify.aws/react/build-ui/formbuilder/customize/"
---

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](/[platform]/build-ui/formbuilder/)

All Amplify forms are built with the [Amplify UI library](https://ui.docs.amplify.aws/). The generated form provides a mechanism to override properties for each individual input component, like [TextField](https://ui.docs.amplify.aws/react/components/textfield), [TextAreaField](https://ui.docs.amplify.aws/react/components/textareafield), [SelectField](https://ui.docs.amplify.aws/react/components/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:

```jsx
import TodoCreateForm from '@/ui-components/TodoCreateForm'

<TodoCreateForm
  // highlight-start
  overrides={{
    content: {
      variation: 'quiet',
      label: 'Todo'
    }
  }}
  // highlight-end
/>
```

<Callout>

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.

</Callout>
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:

```jsx title="src/ui-components/TodoCreateForm.js"
  // 1. Set initialValues
  const initialValues = {
    content: "",
    // highlight-next-line
    priority: "" // Initial value for priority
  };

  // 2. State setup
  const [priority, setPriority] = React.useState(initialValues.priority);

  // 3. Update resetValues
  const resetStateValues = () => {
    .. // previous fields
    // highlight-next-line
    setPriority(initialValues.priority)
    setErrors({});
  };

  // 4. Validation setup
  const validations = {
    content: [],
    // highlight-next-line
    priority: [] // Assuming no special validations for now
  };

  // 5. Update form submission
   onSubmit={async (event) => {
        event.preventDefault();
        let modelFields = {
          ..,
          // highlight-next-line
          priority
        };

  // 6. Add TextField
  <TextField
     label="Priority"
     isRequired={false}
     isReadOnly={false}
     value={priority}
     onChange={(e) => {
       let { value } = e.target;
       if (onChange) {
         const modelFields = {
           priority: value,
         };
         const result = onChange(modelFields);
         value = result?.priority ?? value;
       }
       if (errors.priority?.hasError) {
         runValidationTasks("priority", value);
       }
       setPriority(value);
     }}
     onBlur={() => runValidationTasks("priority", priority)}
     errorMessage={errors.priority?.errorMessage}
     hasError={errors.priority?.hasError}
     {...getOverrideProps(overrides, "priority")}
   />

```

## Manually add option fields

[Select Fields](https://ui.docs.amplify.aws/react/components/selectfield), [Radio Group Fields](https://ui.docs.amplify.aws/react/components/radiogroupfield), and [Autocomplete Fields](https://ui.docs.amplify.aws/react/components/autocomplete) 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>`

```js title="src/ui-components/TodoCreateForm.js"
  // 6. Import <SelectField> component and add to form return
  <SelectField
    label="Label" 
    placeholder="Please select an option" 
    value={status} 
    onChange={(e) => {
      let { value } = e.target;
      if (onChange) {
          const modelFields = {
              status: value
          };
          const result = onChange(modelFields);
          value = result?.status ?? value;
      }
      if (errors.status?.hasError) {
          runValidationTasks("status", value);
      }
      setStatus(value);
      }} 
      onBlur={() => runValidationTasks("status", status)}
      errorMessage={errors.status?.errorMessage} 
      hasError={errors.status?.hasError} 
      {...getOverrideProps(overrides, "status")}
    >
      <option children="Not started" value="Not started" {...getOverrideProps(overrides, "statusOption0")}></option>
      <option children="In progress" value="In progress" {...getOverrideProps(overrides, "statusOption1")}></option>
      <option children="Done" value="Done" {...getOverrideProps(overrides, "statusOption2")}></option>
  </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`).

```js
import TodoCreateForm from '@/ui-components/TodoCreateForm'

<TodoCreateForm overrides={{
  // highlight-start
  TodoCreateForm: {
    rowGap: 'xl',    // horizontal gap between inputs
    columnGap: 'xs', // vertical gap between inputs
    padding: 'xl',   // padding around form
  },
  // highlight-end
}} />
```

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

```js
import TodoCreateForm from '@/ui-components/TodoCreateForm'

<TodoCreateForm overrides={{
  // highlight-start
  ClearButton: {
    children: 'Close'
  },
  SubmitButton: {
    children: 'Save todo'
  }
  // highlight-end
}} />
```

## Toggle visibility for Submit and Clear buttons

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

```js
import TodoCreateForm from '@/ui-components/TodoCreateForm'

<TodoCreateForm overrides={{
  // highlight-start
  ClearButton: {
    display: 'none'
  },
  SubmitButton: {
    display: 'none'
  }
  // highlight-end
}} />
```

If you hide all form action buttons, you can still leverage the [`onChange` event handler](/gen1/[platform]/build-ui/formbuilder/lifecycle/#get-form-data-as-your-user-inputs-data---onchange) to self-manage the form lifecycle. This is useful for a form that updates data in real-time without explicit user confirmation.

```jsx
import TodoCreateForm from '@/ui-components/TodoCreateForm'

<TodoCreateForm
  // highlight-start
  onChange={(fields) => {
    console.log({ fields })
    // make sure you return fields!
    return fields
  }}
  // highlight-end
/>
```