Switch
Similar to Checkboxes, you can use Switches to indicate or control boolean values.
To add the Switch
component to your app:
import {Switch} from '@stripe/ui-extension-sdk/ui';
A common use of Switches is for settings that you save immediately—in other words, Switch
is rarely part of a larger form that needs to be submitted separately.
Here’s a simple example of a 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 |
|
State management
Use the Switch
component as an uncontrolled input:
<Switch onChange={(e) => { console.log(e.target.checked); }} defaultChecked label="This Switch is uncontrolled." />
Disabled
You can disable a Switch
component, which prevents changes.
<Switch label="This Switch is disabled." defaultChecked disabled />