p-radio-group can be integrated into a form in two ways: controlled or uncontrolled, depending on your
needs.p-radio-group state is externally managed using the value 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.p-radio-group automatically manages its own state and includes 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-radio-group name="myRadioGroup" label="Some Label" value="a">
<p-radio-group-option label="Option A" value="a"></p-radio-group-option>
<p-radio-group-option label="Option B" value="b"></p-radio-group-option>
<p-radio-group-option label="Option C" value="c"></p-radio-group-option>
<p-radio-group-option label="Option D" value="d"></p-radio-group-option>
<p-radio-group-option label="Option E" value="e"></p-radio-group-option>
<p-radio-group-option label="Option F" value="f"></p-radio-group-option>
</p-radio-group>
<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('myRadioGroup') || 'none'}`;
});
</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" slotOption B with slotted label
Disabled Option C with slotted label, a nested link and a label-after slot.
Option C with slotted label and a nested link
<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
<title></title>
</head>
<body class="bg-canvas">
<p-radio-group state="error" value="a">
<span slot="label">
Some slotted label with a
<a href="https://designsystem.porsche.com" class="underline">
link
</a>
text and a "label-after" slot.
</span>
<p-popover slot="label-after">
Some Popover description
</p-popover>
<span slot="description">
Some slotted description with a
<a href="https://designsystem.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-radio-group-option value="a">
<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">
Option A with slotted label and a popover
</p-popover>
</p-radio-group-option>
<p-radio-group-option value="b">
<span slot="label">
Option B with slotted label
</span>
</p-radio-group-option>
<p-radio-group-option value="c" disabled="true">
<span slot="label">
Disabled Option C with slotted label, a nested
<a href="https://www.porsche.com" class="underline">
link
</a>
and a label-after slot.
</span>
<p-popover slot="label-after">
Some information about the disabled state.
</p-popover>
</p-radio-group-option>
<p-radio-group-option value="d">
<span slot="label">
Option C with slotted label and a nested
<a href="https://www.porsche.com" class="underline">
link
</a>
</span>
</p-radio-group-option>
</p-radio-group>
<script>
</script>
</body>
</html>