Skip to contentPorsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchGitHub repository of Porsche Design SystemOpen settings sidebar
Checkbox Table of ContentsPropertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultchecked checkedReflects the checkbox's current checked state and allows setting the initial checked value on load.booleanfalsecompact compactReduces the checkbox size and spacing for a more compact layout.booleanfalsedisabled disabledDisables the checkbox, preventing all interaction. The value is not submitted with the form.booleanfalseform formAssociates the checkbox with a form element by its ID when not directly nested inside it.stringundefinedhideLabel 🛠hide-labelHides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.boolean
BreakpointCustomizable<boolean>falseindeterminate indeterminatePuts the checkbox into an indeterminate state, indicating that a group of child items is only partially selected.booleanfalselabel labelSets the visible label text displayed next to the checkbox.string''loading đŸ§Șloadingexperimental Disables the checkbox and displays a loading spinner to indicate an ongoing operation.booleanfalsemessage messageSets the validation feedback message displayed below the checkbox when state is success or error.string''name nameSets the name submitted with the form data to identify this checkbox's value on the server.string''required requiredMarks the checkbox as required — form submission is blocked unless the checkbox is checked.booleanfalsestate stateSets the validation state, controlling the visual appearance and style of the feedback message (none, success, error).type CheckboxState =
'none'
'error'
'success''none'value valueSets the value submitted with the form data when the checkbox is checked. Unchecked checkboxes are excluded from form submissions.string'on'EventsEventDescriptionTypeblur Emitted when the checkbox loses focus.type CheckboxBlurEventDetail = Event
CustomEvent<CheckboxBlurEventDetail>change Emitted when the user changes the checked state of the checkbox.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.
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%