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. You should still set required on the input of the wrapped form elements to ensure accessibility, and the support of screen readers.

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" required="true" />
  </p-text-field-wrapper>
</p-fieldset>
<script>

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