Porsche Design System

Radio Button Wrapper

Table of Contents

Slots
Loading

Slots#

Sometimes it's useful to be able to render markup (e.g. an anchor tag) for label 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 label 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-base">

<p-radio-button-wrapper state="error">
  <span slot="label" id="some-label-id-1">
    Some label with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
  <input type="radio" name="some-name" aria-labelledby="some-label-id-1" />
</p-radio-button-wrapper>

<p-radio-button-wrapper label="Some label" state="error" class="mt-fluid-sm">
  <span slot="label" id="some-label-id-2">
    Some label with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
  <input type="radio" name="some-name" aria-labelledby="some-label-id-2" aria-describedby="some-message-id" />
  <span slot="message" id="some-message-id">
    Some error message with a 
    <a href="https://designsystem.porsche.com">
      link
    </a>
    .
  </span>
</p-radio-button-wrapper>
<script>

</script>
</body>
</html>

Loading#

The loading prop is experimental and might be removed in a future release.

The loading property can be used to indicate that the current state change requires loading. It should be applied exclusively to the radio button that is clicked and should remain visible until the checked state of that radio button has changed. Keep in mind that the loading state will only appear when the radio button is not checked.

Open in Stackblitz

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

<p-radio-button-wrapper label="Some label" loading="true">
  <input type="radio" name="some-name" />
</p-radio-button-wrapper>

<p-radio-button-wrapper label="Some label" class="mt-fluid-sm">
  <input type="radio" name="some-name" checked />
</p-radio-button-wrapper>
<script>

</script>
</body>
</html>

Attention