Checkbox Table of Contents

• Props
• Events
• Slots
• CSS Variables

Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultchecked checkedReflects the checkbox current checked state and allows setting the initial checked state.booleanfalsecompact compactDisplays the checkbox in compact mode.booleanfalsedisabled disabledMarks the checkbox as disabled.booleanfalseform formThe id of a form element the checkbox should be associated with.stringundefinedhideLabel 🛠hide-labelShows or hides the label. For better accessibility, it is recommended to show the label.boolean
BreakpointCustomizable<boolean>falseindeterminate indeterminateMarks the checkbox as indeterminate.booleanfalselabel labelText content for a user-facing label.string''loading 🧪loadingexperimental Disables the checkbox and shows a loading indicator.booleanfalsemessage messageThe message styled depending on validation state.string''name nameThe name of the checkbox.string''required requiredMarks the checkbox as required.booleanfalsestate stateThe validation state.type CheckboxState =
'none'
'error'
'success''none'value valueThe checkbox value. When a form is submitted, only a checkbox which is currently checked is included in the submission.string'on'EventsEventDescriptionTypeblur Emitted when the checkbox has lost focus.type CheckboxBlurEventDetail = Event
CustomEvent<CheckboxBlurEventDetail>change Emitted when checkbox checked property is changed.type CheckboxChangeEventDetail = Event
CustomEvent<CheckboxChangeEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="label"> Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot name="label-after"> Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`).<slot name="message"> Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.CSS VariablesCSS VariableDescriptiondefaultValue--p-checkbox-border-color 🧪Experimental: Border colors of Checkbox. Should be used to override the default border color in different states (e.g., hover, focus, error), e.g. when the Checkbox is wrapped inside a custom label.--p-checkbox-background-color 🧪Experimental: Background color of Checkbox.--p-checkbox-icon-color 🧪Experimental: Checkmark icon color of Checkbox.