Fieldset for Angular

import { AuiFieldset } from '@absoluteui/angular/fieldset';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Fieldset page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { fieldset: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiFieldset } from '@absoluteui/angular/fieldset';
import { AuiTextInput } from '@absoluteui/angular/text-input';

@Component({
  selector: 'app-address',
  imports: [AuiFieldset, AuiTextInput],
  template: `
    <fieldset auiFieldset legend="Delivery address" [required]="true" [error]="error">
      <aui-text-input label="Street" autocomplete="address-line1"></aui-text-input>
      <aui-text-input label="City" autocomplete="address-level2"></aui-text-input>
    </fieldset>`,
})
export class AddressComponent {
  error: string | null = null;
}

fieldset[auiFieldset]

Class AuiFieldset; template reference #ref="auiFieldset".

AbsoluteUI Fieldset: <fieldset auiFieldset legend="Address">...controls...</fieldset>. Enhances the native fieldset in place with the legend, help text, required marker, and a group error; the projected controls stay Angular-managed. Disabled is the native attribute.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
legend	string		Required. Visible legend; the group’s accessible name.
hideLegend	boolean	false	Visually hide the legend (it stays the accessible name).
description	string		Help text for the group, referenced by aria-describedby.
required	boolean	false	Required marker; ‘(required)’ is added to the spoken legend.
error	string | null		Group-level error message; empty or null hides it.
locale	string	'en-US'	Locale of the required text.
icons	Partial<FieldsetIcons>		Icon slot overrides.