Docs / Components
SenseFieldsetComponent
Form grouping surface from @artificialsenselabs/ui with legend, optional collapse, and content projection for related controls.
Live demo: run nx serve showcase and open /components/fieldset (port 4202).
Overview
Category: Form / layout. Selector: sense-fieldset. Import: import { SenseFieldsetComponent } from '@artificialsenselabs/ui';
<sense-fieldset legend="Account" [toggleable]="true">
<sense-input label="Email" />
</sense-fieldset>Content slots
| Selector | Region |
|---|---|
[fieldsetLegend] | Custom legend markup (alternative to legend input). |
(default) | Grouped field content. |
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
legend | string | '' | Legend label text. |
toggleable | boolean | false | Enables collapsible legend disclosure control. |
collapsed | boolean | false | Two-way bindable collapse state. |
toggleLabel | string | null | null | Toggle aria-label when legend is empty; falls back to i18n. |
styleClass | string | null | null | Additional host classes. |
Outputs
| Output | Payload | Description |
|---|---|---|
toggled | { collapsed: boolean } | Emitted when collapse state changes. |
Accessibility
- Host exposes
role="group"witharia-labelledbypointing at the legend. - Toggleable legends use
role="button",aria-expanded, andaria-controls. - Collapsed content is hidden with
aria-hidden="true"on the content wrapper. - Keyboard: Enter and Space toggle when
toggleableis true.
APG reference: WAI-ARIA disclosure pattern.