Checkbox
Checkboxes are used to select something. They can be used to reflect a binary setting or for selecting elements to perform an action. Related design guidelines: Data input
ExamplesPropsCSS VariablesProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the Checkbox. |
| isValid | boolean | No | true | Flag to show if the Checkbox selection is valid or invalid. |
| isDisabled | boolean | No | false | Flag to show if the Checkbox is disabled. |
| isChecked | boolean | No | false | Flag to show if the Checkbox is checked. |
| checked | boolean | No | ||
| onChange | (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void | No | () => {} | A callback for when the Checkbox selection changes. |
| label | React.ReactNode | No | Label text of the checkbox. | |
| id | string | Yes | Id of the checkbox. | |
| aria-label | string | No | Aria-label of the checkbox. | |
| description | React.ReactNode | No | Description text of the checkbox. |
CSS Variables
| .pf-c-check | --pf-c-check--GridGap | 0.25rem 0.5rem | ||
| .pf-c-check | --pf-c-check__label--disabled--Color | #6a6e73 | ||
| .pf-c-check | --pf-c-check__label--Color | #151515 | ||
| .pf-c-check | --pf-c-check__label--FontWeight | 400 | ||
| .pf-c-check | --pf-c-check__label--FontSize | 1rem | ||
| .pf-c-check | --pf-c-check__label--LineHeight | 1.3 | ||
| .pf-c-check | --pf-c-check__input--MarginTop | -0.1875rem | ||
| .pf-c-check | --pf-c-check__description--FontSize | 0.875rem | ||
| .pf-c-check | --pf-c-check__description--Color | #6a6e73 | ||
| .pf-c-check__label:disabled | --pf-c-check__label--Color | #6a6e73 | ||
