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.

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-base">

<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>