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 as a compact version.booleanfalsedisabled disabledMarks the checkbox as disabled.booleanfalseform formThe id of a form element the checkbox should be associated with.stringundefinedhideLabel 🛠hide-labelShow or hide label. For better accessibility, it's recommended to show the label.boolean
BreakpointCustomizable<boolean>falseindeterminate indeterminateMarks the checkbox as indeterminate.booleanfalselabel labelThe label text.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'theme themeAdapts the color depending on the theme.type Theme =
'light'
'dark'
'auto''light'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>update type CheckboxUpdateEventDetail = {
  name: string;
  value?: string;
  checked: boolean;
}
CustomEvent<CheckboxUpdateEventDetail>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-hyphens Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.auto