Optionsschaltflächen-Komponente für Stripe-Apps

Verwenden Sie Optionsfelder, um aus einer Reihe von sich gegenseitig ausschließenden Optionen eine Auswahl zu treffen.

SDK-Version

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

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

Beispiel wird geladen ...

<Radio label="This is a Radio." />

Optionsfeld-Eigenschaften

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.
`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` Wird verwendet, um mehrere `Radios` in einer einzigen, sich gegenseitig ausschließenden Gruppe für unkontrollierte Anwendungsszenarien zu sammeln.
`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.

Deaktiviert

Sie können eine Radio-Komponente deaktivieren. So werden Änderungen verhindert.

Beispiel wird geladen ...

<Radio name="group" label="Ah ah ah" disabled />
<Radio
  name="group"
  disabled
  defaultChecked
  label="You didn't say the magic word"
/>

Ungültig

Radio kann ungültig sein.

Beispiel wird geladen ...

<Radio label="This is an invalid input" invalid />

Statusmanagement

Verwenden Sie die Radio-Komponente als unkontrollierte Eingabe:

Beispiel wird geladen ...

<Radio
  name="group"
  label="Have some of Column A"
  onChange={(e) => {
    console.log(e.target.checked);
  }}
/>
<Radio
  name="group"
  label="Try all of Column B"
  onChange={(e) => {
    console.log(e.target.checked);
  }}
/>

Optionsschaltflächen-Komponente für Stripe-Apps

Verwenden Sie Optionsfelder, um aus einer Reihe von sich gegenseitig ausschließenden Optionen eine Auswahl zu treffen.

Optionsfeld-Eigenschaften

Deaktiviert

Ungültig

Statusmanagement

Siehe auch