export const meta = {
  title: 'Customize form inputs',
  description:
    'Use the Form Builder in Amplify Studio to customize React form components. You can add new form inputs, bind them to a field, customize labels, and add validation rules.'
};

Use the Form Builder in Amplify Studio to customize React form components. You can add new form inputs, bind them to a field, customize labels, and add validation rules.

![Amplify Studio Form Builder interface breakdown](/images/console/formbuilder/customize-overview.png)

To access **Form Builder**, login into [Amplify Studio](/console/adminui/start/#logging-in-and-creating-an-app).

The Form Builder interface consists of the following items:

1. **Form input**: Select a form input to reveal the **Display**, **Data**, and **Validation rules** settings.
2. **Display options**: Configure the input **type**, **label**, **placeholder**, and **description**.
3. **Data**: Connect the input to a field in the submission payload.
4. **Validation rules**: Visually add validation rules. Learn more about [How to add validation rules](/console/formbuilder/validations/).
5. **Action menu**: Action menu to delete a form input.
6. **Form spacing editor**: Set form padding, and horizontal and vertical gaps between inputs.
7. **View as end user**: Test the form inline, without needing to integrate the form into a React app.

## Add a form input

Add form inputs to personalize the form to your use case. To add a form element:

1. Move your mouse onto the center form canvas.
2. Hover in between, before, or after a form input until a blue bar with a (+) sign appears.
3. Click the blue bar with the (+) sign.
4. Select the form input you want to add.

<video autoPlay={true} muted={true} loop={true} width="100%">
  <source src="/images/console/formbuilder/customize-add.mp4" />
</video>


Every input element in your form can be customized. Select a field in the form to open the configuration menu, where you can customize parts of the input, like its display label and placeholder. 

Some form inputs have unique configurations, like **Storage Manager**. [Learn more about configuring special fields in the documentation](/console/formbuilder/special-inputs). 


## Reorder form inputs with drag and drop

Rearrange form inputs vertically or horizontally.

1. Click and drag a form input
2. Move form input above, below, left, or right of another form input
3. Drop when a blue bar appears, indicating the form input's new placement

<video autoPlay={true} muted={true} loop={true} width="100%">
  <source src="/images/console/formbuilder/customize-drag-and-drop.mp4" />
</video>

## View form as end user

If you want to quickly test your form customizations, select **View as end user** to view the customized form fully functioning within Studio.

**Note:** If your form is connected to a data model, then form data will be saved to the cloud upon clicking **Submit**. If this app is being used in production, the data you are saving may be visible to customers.

<video autoPlay={true} muted={true} loop={true} width="100%">
  <source src="/images/console/formbuilder/customize-view-as-end-user.mp4" />
</video>

## Configure form spacings (paddings and gaps)

Add spacing to your form and between inputs. The spacing editor allows you to set the following spacing values (from left-to-right):

- **Horizontal gap**: the space between horizontally arranged inputs.
- **Vertical gap**: the space between vertically arranged inputs.
- **Padding**: the space around the form inputs and the form's border.

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

<video autoPlay={true} muted={true} loop={true} width="100%">
  <source src="/images/console/formbuilder/customize-spacing.mp4" />
</video>

## Configure options for Select, Radio Group, or Autocomplete Field

[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".

1. Pick a **Select Field**, **Radio Group Field**, or **Autocomplete Field** input
2. Go to **Data > Options**
3. Enter available options line-by-line or paste in a JSON array, such as `["Not started", "In progress", "Done"]`

<video autoPlay={true} muted={true} loop={true} width="100%">
  <source src="/images/console/formbuilder/customize-options.mp4" />
</video>

## Enable list inputs

`TextInput`s can accept multiple values by toggling "Accept multiple values", enabling users to add, update, and remove items. This functionality is only enabled for inputs not linked to a data model. If your input is linked to an existing model, this feature is controlled directly on the model by toggling the "Is array" property on the corresponding field.

1. Select a form input that's not connected to a data model
2. Go to **Data**
3. Select **Accept multiple values**

![Screenshot of "Accept multiple values" checkbox](/images/console/formbuilder/customize-accept-multiple-values.png)

Here is what a list input looks like for the end user:

<video autoPlay={true} muted={true} loop={true} width="100%">
  <source src="/images/console/formbuilder/customize-list-control.mp4" />
</video>

## Add sectional elements

Use sectional elements to divide your form up into multiple parts. This is useful to represent nested data and their designated form inputs in individual sections.

1. Move your mouse onto the center form canvas.
2. Hover in between, before, or after a form input until a blue bar with a (+) sign appears.
3. Click the blue bar with the (+) sign.
4. Scroll to the bottom of the element search list
5. Select **Heading**, **Divider**, or **Text**

<video autoPlay={true} muted={true} loop={true} width="100%">
  <source src="/images/console/formbuilder/customize-sectional.mp4" />
</video>

## Delete a form input

1. Selecting the form input.
2. Select **Action** > **Delete**.
