Kontrollkästchen-Komponente für Stripe-Apps

Mithilfe von Kontrollkästchen können Sie boolesche Werte angeben oder kontrollieren.

SDK-Version

So fügen Sie Ihrer App die Checkbox Komponente hinzu:

import {Checkbox} from '@stripe/ui-extension-sdk/ui';

Beispiel wird geladen ...

<Checkbox
  label="This is a Checkbox."
  onChange={(e) => {
    console.log(e.target.checked);
  }}
/>

Neben den entsprechenden nativen DOM-Attributen ü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 `<form>` 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<HTMLInputElement>) => 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.

Beispiel wird geladen ...

const [checked1, setChecked1] = React.useState(false);
const [checked2, setChecked2] = React.useState(true);

const allChecked = checked1 && checked2;

const handleAggregateChange = () => {
  if (checked1 && checked2) {
    setChecked1(false);
    setChecked2(false);
  } else {
    setChecked1(true);
    setChecked2(true);
  }
};

return (
  <Box
    css={{
      stack: 'y',
    }}
  >
    <Checkbox
      label="This Checkbox is aggregating the state of the Checkboxes below it."
      checked={allChecked}
      indeterminate={checked1 !== checked2}
      onChange={handleAggregateChange}
    />
    <Checkbox
      label="Checkbox 1"
      checked={checked1}
      onChange={(e) => {
        setChecked1(e.target.checked);
      }}
    />
    <Checkbox
      label="Checkbox 2"
      checked={checked2}
      onChange={(e) => {
        setChecked2(e.target.checked);
      }}
    />
  </Box>
)

Deaktiviert

Checkbox kann disabled sein. So werden Änderungen verhindert.

Beispiel wird geladen ...

<Checkbox label="This Checkbox is disabled." defaultChecked disabled />
<Checkbox disabled invalid label="This invalid Checkbox is disabled." />

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.

Beispiel wird geladen ...

<Checkbox label="This Checkbox is in an invalid state." invalid />

Statusmanagement

Verwenden Sie die Checkbox-Komponente als unkontrollierte Eingabe:

Beispiel wird geladen ...

<Checkbox
  onChange={(e) => {
    console.log(e.target.checked);
  }}
  defaultChecked
  label="This Checkbox is uncontrolled."
/>

Kontrollkästchen-Komponente für Stripe-Apps

Mithilfe von Kontrollkästchen können Sie boolesche Werte angeben oder kontrollieren.

Eigenschaften des Kontrollkästchens

Unbestimmt

Deaktiviert

Ungültig

Statusmanagement

Siehe auch