Kontrollkästchen
So fügen Sie Ihrer App die Checkbox
Komponente hinzu:
import {Checkbox} from '@stripe/ui-extension-sdk/ui';
<Checkbox label="This is a Checkbox." onChange={(e) => { console.log(e.target.checked); }} />
Neben den entsprechenden nativen DOM-Attributen übernimmt Checkbox
die folgenden Eigenschaften.
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. |
indeterminate |
| Sets whether the Checkbox should be rendered as indeterminate ("partially checked") or not. Note that this is purely visual, and will not change the actual `checked` state of the Checkbox. If a Checkbox is both `indeterminate` and `checked`, it will display as `indeterminate`. |
invalid |
| |
label |
| Text that describes the control. Will be both visible and clickable. |
name |
| |
onChange |
| |
readOnly |
| |
required |
| |
tabIndex |
| |
value |
|
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.
const [checked1, setChecked1] = React.useState(false); const [checked2, setChecked2] = React.useState(true); return ( <Box css={{ stack: 'x', }} > <Checkbox label="This Checkbox is aggregating the state of the Checkboxes below it." readOnly key={checked1 && checked2} defaultChecked={checked1 && checked2} indeterminate={checked1 !== checked2} /> <Checkbox label="Checkbox 1" onChange={(e) => { setChecked1(e.target.checked); }} /> <Checkbox label="Checkbox 2" defaultChecked onChange={(e) => { setChecked2(e.target.checked); }} /> </Box> );
Deaktiviert
Checkbox
kann disabled
sein. So werden Änderungen verhindert.
<Checkbox label="This Checkbox is disabled." defaultChecked disabled /> <Checkbox disabled invalid label="This invalid Checkbox is disabled." />
Ungültig
Eine Checkbox
-Komponente kann als invalid
markiert werden. Diese Eigenschaft betrifft nur den Stil und hilft bei der Validierung von Formularen. Die Übermittlung des Formulars erfolgt dennoch.
<Checkbox label="This Checkbox is in an invalid state." invalid />
Statusmanagement
Verwenden Sie die Checkbox
-Komponente als unkontrollierte Eingabe:
<Checkbox onChange={(e) => { console.log(e.target.checked); }} defaultChecked label="This Checkbox is uncontrolled." />