Umschalter
Ähnlich wie Kontrollkästchen können Umschalter boolesche Werte angeben oder kontrollieren.
So fügen Sie Ihrer App die Switch
Komponente hinzu:
import {Switch} from '@stripe/ui-extension-sdk/ui';
Switches werden häufig für Einstellungen verwendet, die sofort gespeichert werden. Anders ausgedrückt, ist Switch
selten Teil eines größeren Formulars, das separat übermittelt werden muss.
Nachfolgend finden Sie ein einfaches Beispiel für einen Switch
.
<Switch label="This is a Switch." onChange={(e) => { console.log(e.target.checked); }} />
Props
Prop | Type | Description |
---|---|---|
aria-label |
| Text that describes the control. Only visible to screen readers, and is not clickable. Should not be used if `label` is set. |
autoFocus |
| |
defaultChecked |
| |
description |
| Descriptive text that will be rendered adjacent to the control's label. |
disabled |
| |
error |
| Error text that will be rendered below the control. |
form |
| |
hiddenElements |
| Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. |
invalid |
| |
label |
| Text that describes the control. Will be both visible and clickable. |
name |
| |
onChange |
| |
readOnly |
| |
required |
| |
tabIndex |
| |
value |
|
Statusmanagement
Verwenden Sie die Switch
-Komponente als unkontrollierte Eingabe:
<Switch onChange={(e) => { console.log(e.target.checked); }} defaultChecked label="This Switch is uncontrolled." />
Deaktiviert
Sie können eine Switch
-Komponente auf deaktivieren. So werden Änderungen verhindert.
<Switch label="This Switch is disabled." defaultChecked disabled />