Checkbox
Use checkboxes to indicate or control boolean values.
To add the Checkbox
component to your app:
import {Checkbox} from '@stripe/ui-extension-sdk/ui';
<Checkbox label="This is a Checkbox." onChange={(e) => { console.log(e.target.checked); }} />
Checkbox
takes the following props, in addition to all the appropriate native DOM attributes.
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 |
|
You can set a Checkbox
component to different states:
indeterminate
disabled
invalid
Indeterminate
The Checkbox
component can be in an indeterminate
state. This is useful when it represents the aggregated state of some other set of checkboxes, of which some may be checked and some may not. Note that this property is purely visual, and does not affect the Checkbox’s underlying checked state.
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> );
Disabled
Checkbox
can be disabled
. This prevents changes.
<Checkbox label="This Checkbox is disabled." defaultChecked disabled /> <Checkbox disabled invalid label="This invalid Checkbox is disabled." />
Invalid
You can mark a Checkbox
component as invalid
. This is a styling-only prop, useful in form validation. It won’t prevent form submission.
<Checkbox label="This Checkbox is in an invalid state." invalid />
State management
Use the Checkbox
component as an uncontrolled input:
<Checkbox onChange={(e) => { console.log(e.target.checked); }} defaultChecked label="This Checkbox is uncontrolled." />