Fieldset

New

Give related content a clear home with a labeled, optionally collapsible group.

Semantic groupingToggleable contentCustom header

Basic

A legend names the group and makes related details easier to scan.

Project overview

Every great project starts with a shared direction. Bring the essentials together so your team can focus on what comes next.

STATUSIn progress

WORKSPACEDesign studio

NEXT MILESTONEDesign review

Toggleable and controlled

Click the legend or use Enter/Space to expand and collapse. Form values are preserved while hidden.

Project name

Owner

Keep the details current so everyone stays on the same page.

Content is expanded. Legend is unlocked.

Custom header

Add an avatar and supporting text through a header template.

A shared space for thoughtful decisions, useful feedback and the next round of ideas.

Design review is ready. Add your feedback before the next team sync.

Initially collapsed

Keep secondary information available without distracting from the main task.

Usage and API

Import AvFieldset from avero-ui. Add AvFieldsetHeader when using the header directive.

HTML

<av-fieldset inputId="details" legend="Project details"
  toggleable [(collapsed)]="collapsed">
  <label for="project-name">Project name</label>
  <input avInput id="project-name" />
</av-fieldset>

State. Supply a unique inputId and a legend or header template. toggleable enables the legend button; [(collapsed)] synchronizes state. Without toggleable the content stays visible. disabled locks only the legend button; external updates and form fields remain available.

Templates and events. A direct child ng-template avFieldsetHeader or #header replaces the legend text. The directive takes precedence. onBeforeToggle and onAfterToggle emit originalEvent and the next collapsed state around a user toggle. External state updates do not emit these events. Content is eagerly created and preserved.

Accessibility. Native fieldset and legend group the content. The toggle is a button with aria-expanded and aria-controls. Customize its accessible name with toggleAriaLabel or toggleAriaLabelledBy. Keep toggleable header content presentational.