FormFieldGroup-Komponente für Stripe-Apps
Gruppieren Sie Formularfelder mit der FormFieldGroup-Komponente.
So fügen Sie Ihrer App die FormFieldGroup Komponente hinzu:
import {FormFieldGroup} from '@stripe/ui-extension-sdk/ui';
<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>
FormFieldGroup-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
| Optional
Beschreibender Text, der neben der Legende der Gruppe angezeigt wird. |
| Optional
Deaktiviert alle Felder in der Gruppe. Kann für jedes Feld einzeln überschrieben werden. |
| Optional
Das Layout der Felder in der Gruppe. |
| Optional
Der Text der Legende der Gruppe. Dies wird als Label mit allen Feldern innerhalb der Gruppe verknüpft. |
| OptionalVeraltet
Markiert die Gruppe als ungültig. Beachten Sie, dass es sich hierbei um eine rein visuelle Eigenschaft handelt, die die Übermittlung nicht verhindert. |
Layouts
Eine FormFieldGroup-Komponente kann verschiedene Layouts unterstützen:
rowcolumn
Dies ist eine Vorschau einer FormFieldGroup-Komponente mit zwei Textfeldern in einem 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>
Dies ist eine Vorschau einer FormFieldGroup-Komponente mit zwei Textfeldern in einem 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>
Zustände
Ein Status ist eine Möglichkeit, den Nutzer/innen die Nutzbarkeit und Gültigkeit des Formulars anzuzeigen. Eine FormFieldGroup-Komponente kann verschiedene Statustypen aufweisen:
invaliddisabled
Status „Ungültig“
Sie können eine FormFieldGroup-Komponente als invalid kennzeichnen, um Nutzer/innen zu zeigen, dass ihre Eingabewerte falsch sind. Wenn die FormFieldGroup-Komponente invalid ist, gilt der Status invalid nicht ebenfalls für abhängige untergeordnete Steuerelemente. Folglich müssen Sie diesen untergeordneten Komponenten Fehler manuell hinzufügen, indem Sie ihnen die Eigenschaft invalid hinzufügen.
<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>
Status „Deaktiviert“
Wenn Sie eine FormFieldGroup-Komponente als disabled kennzeichnen, werden alle darin enthaltenen Felder deaktiviert. Sie können den Status disabled für jedes Feld innerhalb der FormFieldGroup außer Kraft setzen, indem Sie dem Feld die Eigenschaft disabled={false} hinzufügen.
<FormFieldGroup legend="Disabling" disabled> <TextField label="Disabled" placeholder="Disabled" hiddenElements={['label']} /> <TextField label="Not disabled" placeholder="Not disabled" disabled={false} hiddenElements={['label']} /> </FormFieldGroup>