React

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

ExamplesCSS Variables

Examples

Controlled checkbox

Copied to clipboard

Uncontrolled checkbox

Copied to clipboard

Disabled checkbox

Copied to clipboard

CSS Variables

--pf-c-check--GridGapc_check_GridGap0.5rem
--pf-c-check__input--MarginTopc_check__input_MarginTop-0.1875rem
--pf-c-check__label--Colorc_check__label_Color#72767b
--pf-c-check__label--FontSizec_check__label_FontSize1rem
--pf-c-check__label--FontWeightc_check__label_FontWeight400
--pf-c-check__label--LineHeightc_check__label_LineHeight1.3
--pf-c-check__label--disabled--Colorc_check__label_disabled_Color#72767b