# Kontrollkästchen-Komponente für Stripe-Apps Mithilfe von Kontrollkästchen können Sie boolesche Werte angeben oder kontrollieren. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/checkbox?app-sdk-version=8. So fügen Sie Ihrer App die `Checkbox` Komponente hinzu: ```js import {Checkbox} from '@stripe/ui-extension-sdk/ui'; ``` Neben den entsprechenden [nativen DOM-Attributen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) übernimmt `Checkbox` die folgenden Eigenschaften. ### Eigenschaften des Kontrollkästchens | Eigenschaft | Typ | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `autoFocus` | (Optional) `boolean | undefined` Wenn `true`, fokussiert React das Element auf „verbinden“. | | `checked` | (Optional) `boolean | undefined` Steuert, ob die Eingabe ausgewählt ist. Wenn Sie diese Eigenschaft übergeben, müssen Sie auch einen `onChange`-Handler übergeben, der den übergebenen Wert aktualisiert. | | `defaultChecked` | (Optional) `boolean | undefined` Gibt den Anfangswert an, den ein/e Nutzer/in ändern kann. | | `description` | (Optional) `string | undefined` Beschreibender Text, der neben dem Label des Steuerelements angezeigt wird. | | `disabled` | (Optional) `boolean | undefined` Legt fest, ob das Element deaktiviert werden soll. Verhindert die Auswahl. | | `error` | (Optional) `string | undefined` Fehlertext, der unter dem Steuerelement angezeigt wird. | | `form` | (Optional) `string | undefined` Gibt die `id` des `
` an, zu dem diese Eingabe gehört. Wenn es weggelassen wird, handelt es sich um das nächstliegende übergeordnete Formular. | | `hiddenElements` | (Optional) `("label" | "description" | "error")[] | undefined` Blendet die angegebenen Elemente visuell aus. Die ausgeblendeten Elemente sind weiterhin vorhanden und für Screenreader sichtbar. | | `indeterminate` | (Optional) `boolean | undefined` Legt fest, ob das `Checkbox` als unbestimmt („teilweise aktiviert“) dargestellt werden soll oder nicht. Beachten Sie, dass dies eine rein visuelle Einstellung ist und den tatsächlichen `checked`-Status des `Checkbox` nicht ändert. Wenn ein `Checkbox` sowohl `indeterminate` als auch `checked` ist, wird es als `indeterminate` angezeigt. | | `invalid` | (Optional) `boolean | undefined` Legt fest, ob sich das Element in einem ungültigen Status befindet. Diese Eigenschaft kann nicht bearbeitet werden und verhindert die Übermittlung des Formulars nicht. | | `label` | (Optional) `React.ReactNode` Text, der das Steuerelement beschreibt. Wird sichtbar sein und kann angeklickt werden. | | `name` | (Optional) `string | undefined` Gibt den Namen für diese Eingabe an, die mit dem Formular übermittelt wird. | | `onChange` | (Optional) `((event: React.ChangeEvent) => void) | undefined` Erforderlich für kontrollierte Eingaben. Wird sofort ausgelöst, wenn der Wert der Eingabe vom Nutzer/von der Nutzerin geändert wird (z. B. bei jedem Tastenanschlag ausgelöst). Verhält sich wie das Eingabeereignis des Browsers. | | `readOnly` | (Optional) `boolean | undefined` Im Fall von `true` kann die Eingabe vom Nutzer/von der Nutzerin nicht bearbeitet werden. | | `required` | (Optional) `boolean | undefined` Im Fall von `true` muss der Wert angegeben werden, damit das Formular übermittelt werden kann. | | `tabIndex` | (Optional) `number | undefined` Setzt das Standardverhalten der Tabulatortasten außer Kraft. Vermeiden Sie die Verwendung anderer Werte als `-1` und `0`. | | `value` | (Optional) `string | undefined` Steuert den Text der Eingabe. Wenn Sie diese Eigenschaft übergeben, müssen Sie auch einen `onChange`-Handler übergeben, der den übergebenen Wert aktualisiert. | Sie können eine `Checkbox`-Komponente mit verschiedenen Status versehen: - `indeterminate` - `disabled` - `invalid` ## Unbestimmt Die `Checkbox`-Komponente kann den Status `indeterminate` aufweisen. Das ist hilfreich, wenn sie den aggregierten Status anderer Kontrollkästchen darstellt, von denen einige aktiviert sind und andere nicht. Beachten Sie, dass es sich hierbei um eine rein visuelle Eigenschaft handelt, die keine Auswirkung auf den zugrunde liegenden Aktivierungsstatus des Kontrollkästchens hat. ## Deaktiviert `Checkbox` kann `disabled` sein. So werden Änderungen verhindert. ## Ungültig Sie können eine `Checkbox`-Komponente als `invalid` markieren. Diese Eigenschaft betrifft nur den Stil und hilft bei der Validierung von Formularen. Die Übermittlung des Formulars erfolgt dennoch. ## Statusmanagement Verwenden Sie die `Checkbox`-Komponente als [unkontrollierte Eingabe](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#use-uncontrolled-components-for-interactions): # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/checkbox?app-sdk-version=9. So fügen Sie Ihrer App die `Checkbox` Komponente hinzu: ```js import {Checkbox} from '@stripe/ui-extension-sdk/ui'; ``` Neben den entsprechenden [nativen DOM-Attributen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) übernimmt `Checkbox` die folgenden Eigenschaften. ### Eigenschaften des Kontrollkästchens | Eigenschaft | Typ | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `autoFocus` | (Optional) `boolean | undefined` Wenn `true`, fokussiert React das Element auf „verbinden“. | | `checked` | (Optional) `boolean | undefined` Steuert, ob die Eingabe ausgewählt ist. Wenn Sie diese Eigenschaft übergeben, müssen Sie auch einen `onChange`-Handler übergeben, der den übergebenen Wert aktualisiert. | | `defaultChecked` | (Optional) `boolean | undefined` Gibt den Anfangswert an, den ein/e Nutzer/in ändern kann. | | `description` | (Optional) `string | undefined` Beschreibender Text, der neben dem Label des Steuerelements angezeigt wird. | | `disabled` | (Optional) `boolean | undefined` Legt fest, ob das Element deaktiviert werden soll. Verhindert die Auswahl. | | `error` | (Optional) `string | undefined` Fehlertext, der unter dem Steuerelement angezeigt wird. | | `form` | (Optional) `string | undefined` Gibt die `id` des `` an, zu dem diese Eingabe gehört. Wenn es weggelassen wird, handelt es sich um das nächstliegende übergeordnete Formular. | | `hiddenElements` | (Optional) `("label" | "description" | "error")[] | undefined` Blendet die angegebenen Elemente visuell aus. Die ausgeblendeten Elemente sind weiterhin vorhanden und für Screenreader sichtbar. | | `indeterminate` | (Optional) `boolean | undefined` Legt fest, ob das `Checkbox` als unbestimmt („teilweise aktiviert“) dargestellt werden soll oder nicht. Beachten Sie, dass dies eine rein visuelle Einstellung ist und den tatsächlichen `checked`-Status des `Checkbox` nicht ändert. Wenn ein `Checkbox` sowohl `indeterminate` als auch `checked` ist, wird es als `indeterminate` angezeigt. | | `invalid` | (Optional) `boolean | undefined` Legt fest, ob sich das Element in einem ungültigen Status befindet. Diese Eigenschaft kann nicht bearbeitet werden und verhindert die Übermittlung des Formulars nicht. | | `label` | (Optional) `React.ReactNode` Text, der das Steuerelement beschreibt. Wird sichtbar sein und kann angeklickt werden. | | `name` | (Optional) `string | undefined` Gibt den Namen für diese Eingabe an, die mit dem Formular übermittelt wird. | | `onChange` | (Optional) `((event: React.ChangeEvent) => void) | undefined` Erforderlich für kontrollierte Eingaben. Wird sofort ausgelöst, wenn der Wert der Eingabe vom Nutzer/von der Nutzerin geändert wird (z. B. bei jedem Tastenanschlag ausgelöst). Verhält sich wie das Eingabeereignis des Browsers. | | `readOnly` | (Optional) `boolean | undefined` Im Fall von `true` kann die Eingabe vom Nutzer/von der Nutzerin nicht bearbeitet werden. | | `required` | (Optional) `boolean | undefined` Im Fall von `true` muss der Wert angegeben werden, damit das Formular übermittelt werden kann. | | `tabIndex` | (Optional) `number | undefined` Setzt das Standardverhalten der Tabulatortasten außer Kraft. Vermeiden Sie die Verwendung anderer Werte als `-1` und `0`. | | `value` | (Optional) `string | undefined` Steuert den Text der Eingabe. Wenn Sie diese Eigenschaft übergeben, müssen Sie auch einen `onChange`-Handler übergeben, der den übergebenen Wert aktualisiert. | Sie können eine `Checkbox`-Komponente mit verschiedenen Status versehen: - `indeterminate` - `disabled` - `invalid` ## Unbestimmt Die `Checkbox`-Komponente kann den Status `indeterminate` aufweisen. Das ist hilfreich, wenn sie den aggregierten Status anderer Kontrollkästchen darstellt, von denen einige aktiviert sind und andere nicht. Beachten Sie, dass es sich hierbei um eine rein visuelle Eigenschaft handelt, die keine Auswirkung auf den zugrunde liegenden Aktivierungsstatus des Kontrollkästchens hat. ## Deaktiviert `Checkbox` kann `disabled` sein. So werden Änderungen verhindert. ## Ungültig Sie können eine `Checkbox`-Komponente als `invalid` markieren. Diese Eigenschaft betrifft nur den Stil und hilft bei der Validierung von Formularen. Die Übermittlung des Formulars erfolgt dennoch. ## Statusmanagement Verwenden Sie die `Checkbox`-Komponente als [unkontrollierte Eingabe](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md#use-uncontrolled-components-for-interactions): ## See also - [Entwurfsmuster als Orientierung](https://docs.stripe.com/stripe-apps/patterns.md) - [App gestalten](https://docs.stripe.com/stripe-apps/style.md) - [Test der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/ui-testing.md)