Porsche Design System

Fieldset

Table of Contents

Slotted label
Slotted message
Required

Slotted label#

Some legend label

Open in Stackblitz

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

<p-fieldset>
  <span slot="label">
    Some legend label
  </span>
  <p-text-field-wrapper label="Some label">
    <input type="text" name="some-name" />
  </p-text-field-wrapper>
</p-fieldset>
<script>

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

Slotted message#

Some error message

Open in Stackblitz

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

<p-fieldset label="Some legend label" state="error">
  <p-text-field-wrapper label="Some label">
    <input type="text" name="some-name" />
  </p-text-field-wrapper>
  <span slot="message">
    Some error message
  </span>
</p-fieldset>
<script>

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

Required#

If the p-fieldset is set to required="true", only the label of the p-fieldset gets an asterisk. It is removed from all wrapped child components, as long as they are Porsche Design System form elements.

The required="true" prop should only be used if all children elements are required. If those children elements are a group of radio buttons, it's mandatory to add aria="{ 'role': 'radiogroup' }" prop to p-fieldset as well. There is no need to set required="true" on the individual radio buttons, as the fieldset already indicates that a selection of the radio button group is required.

For all other cases, you should set required="true" on the individual form elements, such as input fields or checkboxes.

Required fieldset with radio buttons

Open in Stackblitz

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

<p-fieldset label="Some legend label" required="true" aria="{'role': 'radiogroup'}">
  <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>
  <p-radio-button-wrapper label="Some label" class="mt-fluid-sm">
    <input type="radio" name="some-name" />
  </p-radio-button-wrapper>
</p-fieldset>
<script>

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

Required fieldset with input fields

Open in Stackblitz

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

<p-fieldset label="Some legend label" required="true">
  <p-text-field-wrapper label="Some label">
    <input type="text" name="some-name-1" required="true" />
  </p-text-field-wrapper>
  <p-text-field-wrapper label="Some label">
    <input type="text" name="some-name-2" required="true" />
  </p-text-field-wrapper>
</p-fieldset>
<script>

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