Porsche Design System

Radio Button Wrapper 🚫

The p-radio-button-wrapper component is a styling wrapper for the native HTML input type radio form element. The singular property of a Radio Button makes it distinct from a checkbox, which allows more than one (or no) item to be selected and for the unselected state to be restored.

This component is deprecated and will be removed with the next major release. Please use p-radio-group instead.

A label is a caption which informs the user what information a particular form field is asking for. The p-radio-button-wrapper component can be used with or without a label but it's recommended to keep the label visible for better accessibility whenever possible. When used without a label, it's best practice to provide a descriptive label text for screen readers.

Open in Stackblitz

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

<p-radio-button-wrapper label="Some label">
  <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" />
</p-radio-button-wrapper>
<script>

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

Deprecation hint