Checkbox​

The Checkbox UI component provides customers with binary choices, such as opting for receiving marketing information or agreeing to terms and conditions.

Preview​

Code example​

render('Checkout::Dynamic::Render', () => {
  return <Checkbox id="checkbox" name="checkbox">Save this information for next time</Checkbox>;
});

CheckboxProps​

id?​

A unique identifier for the UI component.
If this property is not set, the system will automatically generate a globally unique ID for this component.

name?​

The name of this UI component.

value?​

Indicates whether the checkbox is activated. Valid values are:

• true: The checkbox is activated.
• false: The checkbox is deactivated.

This property is an alias for checked. If both value and checked are set, the checked setting takes precedence. This design ensures compatibility with form usage, providing a standard value key.

checked?​

Indicates whether the checkbox is activated. Valid values are:

• true: The checkbox is activated.
• false: The checkbox is deactivated.

disabled?​

Indicates whether the component is disabled. Valid values are:

• true: Disabled.
• false: Available.

error?​

The error message displayed to the customer. If this property is configured, the component will be highlighted in red and show the error message.

accessibilityLabel?​

A label for this component. Configuring this feature directly sets the aria-label attribute, providing accessibility information for screen readers.

onChange?​

The callback triggered when the checkbox state changes.
This callback accepts a boolean value that indicates whether the checkbox is activated or deactivated.