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="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

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

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

Slotted message#

Some error message

Open in Stackblitz

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

<p-fieldset label="Some legend label" state="error">
  <p-input-text label="Some label" name="some-name"></p-input-text>
  <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 child elements are required. If those child elements are a group of radio buttons, it is mandatory to add the 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="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-fieldset label="Some legend label" required="true" aria="{'role': 'radiogroup'}">
  <p-radio-group label="Some label" name="some-name">
    <p-radio-group-option value="a" label="Option A"></p-radio-group-option>
    <p-radio-group-option value="b" label="Option B"></p-radio-group-option>
    <p-radio-group-option value="c" label="Option C"></p-radio-group-option>
  </p-radio-group>
</p-fieldset>
<script>

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

Required fieldset with input fields

Open in Stackblitz

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

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

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