| Name | Description | Default | Type |
|---|---|---|---|
checked | Sets checked prop via onChange when using as controlled component. | | boolean |
defaultChecked | Initialize checked prop when using as uncontrolled component. | | boolean |
disabled | Disable the control. The browser defaults to false. | | boolean |
id | Sets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render. | | string |
indeterminate | Sets Checkbox to an an indeterminate state. | false | boolean |
label | Pass a string or a fragment with an Icon and string. | | ReactNode |
name | Sets html name attribute for the underlying control. Useful for mapping to a data field. | | string |
onChange | | (e: ChangeEvent<HTMLInputElement>) => void | |
required | Indicate if the field is required. The browser defaults to false. | | boolean |
status | Set visual state based on a validation state. | | 'error' |'pending' |'success' |'warning' |
Checkbox
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
Checkboxes allow users to select or unselect options.
Usage
Checkboxes should be used when displaying less than 7 options to choose from. If you require more than 7 options, consider using a Select Field instead. The Checkbox component allows for standard Form Field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info.
If there is a label and the Field is not disabled, passing an object to the additionalInfo prop that includes a heading and content will provide the user with more useful information on the Field when they click on the associated information Icon.
Use a single Checkbox for binary selections, such as a decision or affirmation. A user may select and deselect the Checkbox as many times as they like. Do not use the Checkbox when a user MUST make an active decision, such as yes or no (use RadioButtons) or if you are expecting the changes to apply instantly (use a Switch).
Example
CheckboxGroup
If there are multiple options to select, wrap the Checkboxes in a CheckboxGroup. By doing so, all of the selections made will belong to the same Form value.
Example
Checkbox cards
A Checkbox can be set to render as a Card which can be ideal to display large volumes of content within a single wrapper. You can set variant to card on either a Checkbox or a CheckboxGroup.
Checkbox
Example
CheckboxGroup
Example
Related components
Properties
Custom theming
You can override the styles of the Checkbox component by setting a custom theme on the Configuration component.
Example
Theme properties
{
'border-radius':'components.form-control.border-radius'// → components.form-control.border-radius}}}