Porsche Design System

Radio Group

Table of Contents

Form
Slots

Form#

The p-radio-group can be integrated into a form in two ways: controlled or uncontrolled, depending on your needs.

In the controlled approach, the 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.

In the uncontrolled approach, the p-radio-group automatically managing its own state and includes its value in form submissions through the ElementInternals API. This is convenient for smaller forms or simple submissions.

For more details on form integration, refer to the Form section in the developing documentation for your framework of choice, or find a full form integration example in our examples repository.

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<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>

Slots#

Sometimes it's useful to render custom markup for label or message. Therefore, named slots can be used. Make sure not to define the corresponding property on the host element when a named slot is used (because a property definition is preferred over a named slot). For named slots only phrasing content is allowed.

In addition to the named slots label and message, there is also a label-after slot available. This slot must be used to render content after the label which is not directly part of it (e.g. an external link or a p-popover component).

If the p-radio-group/p-radio-group-item is in disabled/loading state and label or label-after slots are used with focusable UI elements (e.g. a or p-popover), the keyboard focus handling has to be managed manually to prevent focusing disabled elements (e.g. add tabindex="-1" on those UI elements).

Some label with a link text and a "label-after" slot.

Some Popover description

Some description with a link.Some error message with a link.

Some slotted label with custom content and a "label-after" slot

Option A with slotted label and a popover

Option B with slotted label

Option C with slotted label and a nested link

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-radio-group state="error" value="a">
  <span slot="label">
    Some 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" class="ms-static-xs">
    Some Popover description
  </p-popover>
  <span slot="description">
    Some description with a 
    <a href="https://designsystem.porsche.com" class="underline">
      link
    </a>
    .
  </span>
  <span slot="message">
    Some 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" class="ms-static-xs">
      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">
    <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>

Attention