# FormFieldGroup component for Stripe Apps

Group form fields with the FormFieldGroup component.

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/formfieldgroup?app-sdk-version=8.

To add the `FormFieldGroup` component to your app:

```js
import {FormFieldGroup} from '@stripe/ui-extension-sdk/ui';
```

### FormFieldGroup props

| Property      | Type                                                                                                                                                  |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`    | (Required)
  `React.ReactNode`

  The contents of the component.                                                                                      |
| `description` | (Optional)
  `string | undefined`

  Descriptive text that will be rendered adjacent to the group’s legend.                                           |
| `disabled`    | (Optional)
  `boolean | undefined`

  Disables all fields in the group. Can be overriden on a per-field basis.                                        |
| `layout`      | (Optional)
  `("row" | "column") | undefined`

  The layout of the fields in the group.                                                               |
| `legend`      | (Optional)
  `string | undefined`

  The text of the group’s legend. This will be associated as a label with all fields inside the group.             |
| `invalid`     | (Optional)(Deprecated)
  `boolean | undefined`

  Marks the group as invalid. Note that this is a visual-only property, and won’t prevent submission. |

## Layouts 

A `FormFieldGroup` component can support different layouts:

- `row`
- `column`

This is a preview of a `FormFieldGroup` component with two text fields in a `row` layout:

This is a preview of a `FormFieldGroup` component with two text fields in a `column` layout:

## States 

A state is a way to display the usability and validity of the form to the user. A `FormFieldGroup` component can have different types of states:

- `invalid`
- `disabled`

### Invalid state 

You can mark a `FormFieldGroup` component as `invalid` to show a user that their input values are incorrect. If the `FormFieldGroup` component is `invalid`, the `invalid` state doesn’t also apply to dependent child controls. Consequently, you must add errors to these child components manually by adding an `invalid` property to them.

### Disabled state 

You can mark a `FormFieldGroup` component as `disabled`, which disables all the fields within it. You can override the `disabled` state on a per-field basis within the `FormFieldGroup` by adding a `disabled={false}` property to the field.


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/formfieldgroup?app-sdk-version=9.

To add the `FormFieldGroup` component to your app:

```js
import {FormFieldGroup} from '@stripe/ui-extension-sdk/ui';
```

### FormFieldGroup props

| Property      | Type                                                                                                                                      |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `children`    | (Required)
  `React.ReactNode`

  The contents of the component.                                                                          |
| `description` | (Optional)
  `string | undefined`

  Descriptive text that will be rendered adjacent to the group’s legend.                               |
| `disabled`    | (Optional)
  `boolean | undefined`

  Disables all fields in the group. Can be overriden on a per-field basis.                            |
| `layout`      | (Optional)
  `("horizontal" | "vertical") | undefined`

  The layout of the fields in the group.                                          |
| `legend`      | (Optional)
  `string | undefined`

  The text of the group’s legend. This will be associated as a label with all fields inside the group. |

## Layouts 

A `FormFieldGroup` component can support different layouts:

- `row`
- `column`

This is a preview of a `FormFieldGroup` component with two text fields in a `row` layout:

This is a preview of a `FormFieldGroup` component with two text fields in a `column` layout:

## Disabled state 

You can mark a `FormFieldGroup` component as `disabled`, which disables all the fields within it. You can override the `disabled` state on a per-field basis within the `FormFieldGroup` by adding a `disabled={false}` property to the field.


## See also

- [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md)
- [Style your app](https://docs.stripe.com/stripe-apps/style.md)
- [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)