Skip to content




A checkbox can be in an on or an off state. Selecting or clearing the checkbox toggles a state. The checkbox behaves according to the functionality of the ptcs-behavior-binary/ptcs-behavior-binary.js and (optionally) that of ptcs-behavior-validate/ptcs-behavior-validate.js.

Usage Examples

Basic Usage

<ptcs-checkbox variable="{{show}}">Show</ptcs-checkbox>

Sets the show variable to true when the checkbox state is on, and to false when it is off.

Start in an on state (checked)

<ptcs-checkbox variable="{{show}}" checked>Show</ptcs-checkbox>

Explicit variable values

<ptcs-checkbox variable="{{tool}}" value-on="knife" value-off="fork">Use tool</ptcs-checkbox>

Sets the tool variable to "knife" when the checkbox is set to on and "fork" when it is set to off.

Enforce validation

<ptcs-checkbox variable="{{terms}}" value-on="read" value-off="unread" required>I have read the Terms and Conditions</ptcs-checkbox>

Require the checkbox to be set via validation, to be used for a mandatory confirmation. In this case, the terms variable is set to "read" when the checkbox checked and to "unread" when it is unchecked.

Component API


Property Type Description Triggers a changed event
checked Boolean The current state of the checkbox (on: checked = true, off: checked = false) No
disabled Boolean Use this property to disable the checkbox No
label String Specifies the checkbox label No
maxWidth String Sets the maximum width of the label No
partial Boolean Displays a dash instead of a check mark No
tooltip String The tooltip that appears when hovering over the checkbox No
tooltipIcon String The icon for the tooltip No
variable any Sets the variable name that the checkbox monitors and assigns No
valueOff any Sets the value that the checkbox assigns to variable when the checkbox is off. Set to false by default No
valueOn any Sets the value that the checkbox assigns to variable when the checkbox is on. Set to true by default. No
extraValidation Function Custom validation function to complement the component's client-side validation logic. This is invoked with the checkbox component itself as parameter, so that it can use any checkbox property for custom validation. Can return true (= valid), false (= invalid), or undefined (ignore validation) No
externalValidity String Checkbox validity as determined externally (server-side). Value: undefined, "unvalidated", "invalid", or "valid" No
hideValidationCriteria Boolean Don't show validation criteria in unvalidated state? No
hideValidationError Boolean Don't show validation error state? No
hideValidationSuccess Boolean Don't show validation success state? No
required Boolean Validation criterion: Must the checkbox be checked? No
validationCriteria String The validation details message No
validationCriteriaIcon String Icon for criteria state (unvalidated). Default: cds:icon_info No
validationErrorIcon String Icon for error state (invalid). Default: cds:icon_error No
validationMessage String The validation (title) message No
validationSuccessDetails String The validation success details message No
validationSuccessIcon String Icon for success state (valid). Default: cds:icon_success No
validationSuccessMessage String The validation success (title) message. Default: "Success" No


No methods


The Parts of a Component

Part Description
root The button container
box The container for the box that contains the marker
check-mark The check mark of the box element
label The container for the text label

State attributes

Attribute Description Part
checked Current state (on: checked = true, off: checked = false) :host
disabled Indicates whether the checkbox is disabled :host
label The displayed label :host, label
partial Shows a dash instead of a check mark :host