Porsche Design SystemSearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
ConfiguratorExamplesUsageAccessibilityAPI
Radio Group Table of Contents 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.
SubmitReset
Last submitted data:
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 be able to render markup (e.g. an anchor tag) for label, description or message. Therefore, a named slot 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.
Some label with a link.Some description with a link.Some error message with a 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" id="some-label-id">
    Some label with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
  <span slot="description" id="some-description-id">
    Some description with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
  <span slot="message" id="some-message-id">
    Some error message with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
  <p-radio-group-option value="a" label="Option A"></p-radio-group-option>
  <p-radio-group-option value="b" label="Option B"></p-radio-group-option>
  <p-radio-group-option value="c" label="Option C"></p-radio-group-option>
  <p-radio-group-option value="d" label="Option D"></p-radio-group-option>
  <p-radio-group-option value="e" label="Option E"></p-radio-group-option>
  <p-radio-group-option value="f" label="Option F"></p-radio-group-option>
</p-radio-group>
<script>

</script>
</body>
</html>
Global settingsThemeChanges the theme of the application and any Porsche Design System component. It's possible to choose between forced theme light and dark. It's also possible to use auto, which applies light or dark theme depending on the operating system settings automatically.LightDarkAuto (sync with operating system)DirectionThe 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%