Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt

Use this file to discover all available pages before exploring further.

The Fieldset component wraps related form controls or content blocks inside a labelled border. The legend can act as a toggle when [toggleable]="true" is set. The Nettalco preset gives the legend a hover background from {content.hover.background}, a {content.border.radius} rounded corner, and a semi-bold 600 font weight to make the label clearly readable within the border.

Usage

<!-- app.component.html -->

<!-- Static fieldset -->
<p-fieldset legend="Billing Address">
  <div class="flex flex-col gap-3">
    <input pInputText placeholder="Street" />
    <input pInputText placeholder="City" />
    <input pInputText placeholder="Postcode" />
  </div>
</p-fieldset>

<!-- Toggleable fieldset -->
<p-fieldset legend="Advanced Options" [toggleable]="true" [collapsed]="true">
  <p>These options are hidden by default to reduce visual clutter.</p>
</p-fieldset>
// app.component.ts
import { Component } from '@angular/core';
import { FieldsetModule } from 'primeng/fieldset';
import { InputTextModule } from 'primeng/inputtext';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  imports: [FieldsetModule, InputTextModule],
})
export class AppComponent {}

Design Tokens

All tokens are defined in src/lib/theme/fieldset/index.ts.

Root

TokenValueDescription
root.background{content.background}Fieldset body background
root.borderColor{content.border.color}Surrounding border color
root.borderRadius{content.border.radius}Corner radius
root.color{content.color}Default text color
root.padding0 1.125rem 1.125rem 1.125remInner padding (no top — legend floats above the border)
root.transitionDuration{transition.duration}Duration for collapse/expand animation

Legend

TokenValueDescription
legend.background{content.background}Legend default background
legend.hoverBackground{content.hover.background}Background on mouse hover (toggleable legends)
legend.color{content.color}Legend text color
legend.hoverColor{content.hover.color}Text color on hover
legend.borderRadius{content.border.radius}Rounded corners on the legend pill
legend.borderWidth1pxBorder width around the legend
legend.borderColortransparentBorder is transparent by default (no visible outline)
legend.padding0.5rem 0.75remCompact horizontal padding, moderate vertical
legend.gap0.5remGap between toggle icon and label text
legend.fontWeight600Semi-bold for strong section labelling

Legend Focus Ring

TokenValueDescription
legend.focusRing.width{focus.ring.width}Global focus ring width
legend.focusRing.style{focus.ring.style}Global focus ring style
legend.focusRing.color{focus.ring.color}Global focus ring color
legend.focusRing.offset{focus.ring.offset}Global focus ring offset
legend.focusRing.shadow{focus.ring.shadow}Global focus ring shadow

Toggle Icon

TokenValueDescription
toggleIcon.color{text.muted.color}Default icon color (dimmed)
toggleIcon.hoverColor{text.hover.muted.color}Icon color on hover

Content

TokenValueDescription
content.padding0No additional inner padding — root padding is sufficient

Theme Notes

  • The legend borderColor: 'transparent' means the 1px border is invisible by default. It exists to maintain consistent spacing and avoid layout shifts if you override borderColor to a visible color for custom styling.
  • Unlike the Card component, Fieldset uses {content.border.radius} (not {border.radius.xl}), giving it a more conservative corner rounding that fits naturally beside form elements.
  • For non-toggleable fieldsets the hover tokens (hoverBackground, hoverColor) have no effect — they only activate when [toggleable]="true" and the legend is interactive.

Build docs developers (and LLMs) love