Examples
Label wraps
You can expand the clickable area of a checkbox so that it spans wider than the checkbox label by adding the isLabelWrapped property. This allows users to select a checkbox by clicking the checkbox itself, the label, or the area between the checkbox and the label.
Checkbox with description
Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.
Checkbox with description and body
Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.This is where custom content goes.
Props
Checkbox
| Name | Type | Default | Description |
|---|---|---|---|
| idrequired | string | Id of the checkbox. | |
| aria-label | string | Aria-label of the checkbox. | |
| body | React.ReactNode | Body text of the checkbox | |
| checked | boolean | ||
| className | string | '' | Additional classes added to the checkbox wrapper. This wrapper will be div element by default. It will be a label element if isLabelWrapped is true, or it can be overridden by any element specified in the component prop. |
| component | React.ElementType | Sets the checkbox wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified. | |
| description | React.ReactNode | Description text of the checkbox. | |
| inputClassName | string | Additional classes added to the checkbox input. | |
| isChecked | boolean | null | false | Flag to show if the checkbox is checked. If null, the checkbox will be indeterminate (partially checked). |
| isDisabled | boolean | false | Flag to show if the checkbox is disabled. |
| isLabelWrapped | boolean | false | Flag to indicate whether the checkbox wrapper element is a <label> element for the checkbox input. Will not apply if a component prop (with a value other than a "label") is specified. |
| isRequired | boolean | false | Flag to show if the checkbox is required. |
| isValid | boolean | true | Flag to show if the checkbox selection is valid or invalid. |
| label | React.ReactNode | Label text of the checkbox. | |
| labelPosition | 'start' | 'end' | Sets the position of the label. Defaults to 'end' (after the checkbox input). | |
| onChange | (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void | () => {} | A callback for when the checkbox selection changes. |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | true | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-check | --pf-v6-c-check--GridGap | 0.5rem 0.5rem | ||
| ||||
| .pf-v6-c-check | --pf-v6-c-check--AccentColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-check | --pf-v6-c-check--m-standalone--MinHeight | calc(0.875rem * 1.5) | ||
| ||||
| .pf-v6-c-check | --pf-v6-c-check__label--disabled--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-check | --pf-v6-c-check__label--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-check | --pf-v6-c-check__label--FontWeight | 400 | ||
| ||||
| .pf-v6-c-check | --pf-v6-c-check__label--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-check | --pf-v6-c-check__label--LineHeight | 1.5 | ||
| ||||
| .pf-v6-c-check | --pf-v6-c-check__description--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-check | --pf-v6-c-check__description--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-check | --pf-v6-c-check__label-required--MarginInlineStart | 0.25rem | ||
| ||||
| .pf-v6-c-check | --pf-v6-c-check__label-required--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-check | --pf-v6-c-check__label-required--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-check | --pf-v6-c-check__input--TranslateY | calc((1.5 * 0.875rem / 2 ) - 50%) | ||
| ||||
| .pf-v6-c-check__label:disabled | --pf-v6-c-check__label--Color | (In light theme) #a3a3a3 | ||
| ||||