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. |
| isLabelBeforeButton | boolean | Flag to show if the checkbox label is shown before the checkbox input. | |
| 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. | |
| 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
| Selector | Variable | Value | ||
|---|---|---|---|---|
| .pf-v5-c-check | --pf-v5-c-check--GridGap | 0.25rem 0.5rem | ||
--pf-v5-c-check--GridGap --pf-v5-global--spacer--xs --pf-v5-global--spacer--sm $pf-v5-global--spacer--xs $pf-v5-global--spacer--sm pf-size-prem(4px) pf-size-prem(8px) 0.25rem 0.5rem | ||||
| .pf-v5-c-check | --pf-v5-c-check__label--disabled--Color | #6a6e73 | ||
--pf-v5-c-check__label--disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-check | --pf-v5-c-check__label--Color | #151515 | ||
--pf-v5-c-check__label--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-check | --pf-v5-c-check__label--FontWeight | 400 | ||
--pf-v5-c-check__label--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-check | --pf-v5-c-check__label--FontSize | 1rem | ||
--pf-v5-c-check__label--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-check | --pf-v5-c-check__label--LineHeight | 1.5 | ||
--pf-v5-c-check__label--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5 | ||||
| .pf-v5-c-check | --pf-v5-c-check__input--TranslateY | calc((1.5 * 1rem / 2 ) - 50%) | ||
--pf-v5-c-check__input--TranslateY calc((--pf-v5-c-check__label--LineHeight * --pf-v5-c-check__label--FontSize / 2 ) - 50%) calc((--pf-v5-global--LineHeight--md * --pf-v5-global--FontSize--md / 2 ) - 50%) calc(($pf-v5-global--LineHeight--md * $pf-v5-global--FontSize--md / 2 ) - 50%) calc((1.5 * pf-font-prem(16px) / 2 ) - 50%) calc((1.5 * 1rem / 2 ) - 50%) | ||||
| .pf-v5-c-check | --pf-v5-c-check__input--TranslateY--moz | calc((1.5 * 1rem / 2 ) - 50%) | ||
--pf-v5-c-check__input--TranslateY--moz --pf-v5-c-check__input--TranslateY calc((--pf-v5-c-check__label--LineHeight * --pf-v5-c-check__label--FontSize / 2 ) - 50%) calc((--pf-v5-global--LineHeight--md * --pf-v5-global--FontSize--md / 2 ) - 50%) calc(($pf-v5-global--LineHeight--md * $pf-v5-global--FontSize--md / 2 ) - 50%) calc((1.5 * pf-font-prem(16px) / 2 ) - 50%) calc((1.5 * 1rem / 2 ) - 50%) | ||||
| .pf-v5-c-check | --pf-v5-c-check__description--FontSize | 0.875rem | ||
--pf-v5-c-check__description--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-check | --pf-v5-c-check__description--Color | #6a6e73 | ||
--pf-v5-c-check__description--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-check | --pf-v5-c-check__body--MarginTop | 0.5rem | ||
--pf-v5-c-check__body--MarginTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-check | --pf-v5-c-check__label-required--MarginLeft | 0.25rem | ||
--pf-v5-c-check__label-required--MarginLeft --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-check | --pf-v5-c-check__label-required--FontSize | 0.875rem | ||
--pf-v5-c-check__label-required--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-check | --pf-v5-c-check__label-required--Color | #c9190b | ||
--pf-v5-c-check__label-required--Color --pf-v5-global--danger-color--100 $pf-v5-global--danger-color--100 $pf-v5-color-red-100 #c9190b | ||||
| .pf-v5-c-check.pf-m-standalone | --pf-v5-c-check--GridGap | 0 | ||
| .pf-v5-c-check.pf-m-standalone | --pf-v5-c-check__input--TranslateY | none | ||
| .pf-v5-c-check__label:disabled | --pf-v5-c-check__label--Color | #6a6e73 | ||
--pf-v5-c-check__label--Color --pf-v5-c-check__label--disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
View source on GitHub