Consent checkbox
sms_marketing capability of the Customer Privacy capability group to work.Use buyer consent checkboxes for collecting the buyer’s approval for a given policy.
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Anchor to propertiesProperties
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
A label used for users using assistive technologies like screen readers. When set, any children or
labelsupplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers.- Anchor to checkedcheckedcheckedbooleanbooleanDefault: falseDefault: false
Whether the control is active.
- Anchor to commandcommandcommand'--auto' | '--show' | '--hide' | '--toggle''--auto' | '--show' | '--hide' | '--toggle'Default: '--auto'Default: '--auto'
Sets the action the
should take when this clickable is activated.See the documentation of particular components for the actions they support.
--auto: a default action for the target component.--show: shows the target component.--hide: hides the target component.--toggle: toggles the target component.--copy: copies the target ClipboardItem.
- Anchor to commandForcommandForcommandForstringstring
ID of a component that should respond to activations (e.g. clicks) on this component.
See
commandfor how to control the behavior of the target.- Anchor to defaultCheckeddefaultCheckeddefaultCheckedbooleanbooleanDefault: falseDefault: false
Whether the control is active by default.
- Anchor to disableddisableddisabledbooleanbooleanDefault: falseDefault: false
Disables the control, disallowing any interaction.
- Anchor to errorerrorerrorstringstring
Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
- Anchor to idididstringstring
A unique identifier for the element.
- Anchor to labellabellabelstringstring
Visual content to use as the control label.
- Anchor to namenamenamestringstring
An identifier for the control that is unique within the nearest containing
Formcomponent.- Anchor to policypolicypolicyConsentPolicyConsentPolicy
The policy for which user consent is being collected for.
sms-marketing: Represents the policy for SMS marketing consent.- Anchor to valuevaluevaluestringstring
The value used in form data when the control is checked.
ConsentPolicy
"sms-marketing"Anchor to eventsEvents
Learn more about registering events.
- Anchor to changechangechangeCallbackEventListener<typeof tagName>CallbackEventListener<typeof tagName>
A callback that is run whenever the control is changed.
CallbackEventListener
(EventListener & {
(event: CallbackEvent<TTagName, Event> & TData): void;
}) | nullCallbackEvent
TEvent & {
currentTarget: HTMLElementTagNameMap[TTagName];
}Preview
Examples
Code
Default
<s-consent-checkbox defaultChecked label="Text me with news and offers" policy="sms-marketing" ></s-consent-checkbox>