FormFieldGroup
To add the FormFieldGroup
component to your app:
import {FormFieldGroup} from '@stripe/ui-extension-sdk/ui';
Props
Prop | Type | Description |
---|---|---|
description |
| Descriptive text that will be rendered adjacent to the group's legend. |
disabled |
| |
invalid |
| Marks the group as invalid. Note that this is a visual-only property, and won't prevent submission. |
layout |
| |
legend |
|
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:
<FormFieldGroup legend="Full name" description="Enter your full name"> <TextField label="First name" placeholder="First name" hiddenElements={['label']} /> <TextField label="Last name" placeholder="Last name" hiddenElements={['label']} /> </FormFieldGroup>
This is a preview of a FormFieldGroup
component with two text fields in a column
layout:
<FormFieldGroup legend="Spiffy settings" layout="column"> <Switch label="Enable transmogrifier" description="Scientific progress goes 'boink'" /> <Switch label="Set zorcher on 'shake and bake'" description="Note: blasters may be useless against slime" /> </FormFieldGroup>
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.
<FormFieldGroup legend="Full name" description="Enter your full name" invalid> <TextField label="First name" value="Tim" placeholder="First name" hiddenElements={['label']} /> <TextField label="Last name" error="Last name missing" placeholder="Last name" hiddenElements={['label']} /> </FormFieldGroup>
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.
<FormFieldGroup legend="Disabling" disabled> <TextField label="Disabled" placeholder="Disabled" hiddenElements={['label']} /> <TextField label="Not disabled" placeholder="Not disabled" disabled={false} hiddenElements={['label']} /> </FormFieldGroup>