p-checkbox can be integrated into a form in two ways: controlled or uncontrolled, depending on your needs.checked property and change event
to keep it in sync with your application logic. This approach is ideal for complex forms or when using a form library.
Note that the component will still always update its internal value automatically when interacted with.<input type="checkbox" />, automatically
managing its own state and including its value in form submissions through the
Form section in the
<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
<title></title>
</head>
<body class="bg-canvas">
<form class="flex flex-col gap-fluid-sm">
<p-checkbox name="myCheckbox" label="Some Label"></p-checkbox>
<div class="flex gap-fluid-sm">
<p-button type="submit">Submit</p-button>
<p-button type="reset">Reset</p-button>
</div>
<p-text>Last submitted data: </p-text>
</form>
<script>
const debugElement = document.querySelector('p-text');
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
debugElement.innerText = `Last submitted data: ${formData.get('myCheckbox')}`;
});
</script>
</body>
</html>checked=false and indeterminate=true.indeterminate attribute only affects how the checkbox is shown. The current value is hidden from the user,
but the checkbox still keeps its checked state. You can find more details in
<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
<title></title>
</head>
<body class="bg-canvas">
<p-checkbox label="Some label" indeterminate="true"></p-checkbox>
<p-checkbox label="Some label" indeterminate="true" checked="true"></p-checkbox>
<script>
</script>
</body>
</html>label or message need markup such as a link. Do not set the corresponding host property at
the same time, because properties take precedence. Named slots only accept
label and message, you can also use label-after for content that should appear after the label but is
not part of the label itself, such as an external link or popover.Attention
disabled/loading state, slotted focusable UI elements (e.g. a) will still receive keyboard focus. Add tabindex="-1" to those UI elements.label-after slot is not affected by a disabled/loading state at all.
Some slotted label with custom content and a "label-after" slot
<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
<title></title>
</head>
<body class="bg-canvas">
<div class="flex flex-col gap-static-sm">
<p-checkbox name="some-name">
<span slot="label">
<img src="assets/911.png" alt="" class="object-contain inline-block align-middle -mt-2 me-static-sm w-[70px]" />
Some slotted label with custom content and a "label-after" slot
</span>
<p-popover slot="label-after">
Some label with a
<a href="https://designsystem.porsche.com" class="underline">
link
</a>
</p-popover>
</p-checkbox>
<p-checkbox name="some-name">
<span slot="label">
Some slotted label
</span>
</p-checkbox>
<p-checkbox name="some-name" disabled="true">
<span slot="label">
Disabled slotted label, a nested
<a href="https://www.porsche.com" class="underline" tabindex="-1">
link
</a>
and a label-after slot.
</span>
<p-popover slot="label-after">
Some information about the disabled state.
</p-popover>
</p-checkbox>
<p-checkbox name="some-name" state="error">
<span slot="label">
Some slotted label with a nested
<a href="https://www.porsche.com" class="underline">
link
</a>
</span>
<span slot="message">
Some slotted error message with a
<a href="https://designsystem.porsche.com" class="underline">
link
</a>
</span>
</p-checkbox>
</div>
<script>
</script>
</body>
</html>p-checkbox component also supports a custom wrapped label by wrapping the component in a label tag. This
approach can be used if the label must be placed individually. The contents of the wrapping label must only contain
raw text elements. If using this approach, the styling and click functionality of the label must be controlled by
the integrating team. To prevent the p-checkbox from receiving focus when the wrapping label is clicked, call
event.preventDefault() in the labelâs click handler.<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
<title></title>
</head>
<body class="bg-canvas">
<div class="flex items-start w-64 border-2 border-contrast-lower rounded-md hover:border-primary transition-colors">
<label class="inline-flex flex-col p-fluid-xs gap-static-xs prose-text-sm cursor-pointer hover:[--p-checkbox-border-color:var(--color-primary)]">
<span>
Some wrapped custom label besides a popover
</span>
<p-checkbox checked="false"></p-checkbox>
</label>
<p-popover class="mr-static-xs mt-static-xs">
Some additional content.
</p-popover>
</div>
<script>
const label = document.querySelector("label");
label.addEventListener('click', () => (pCheckbox.checked = true));
</script>
</body>
</html>