Fieldset

Group related form controls with a native legend.

Category: Layout and content
Import: @neural-ui/core/panel
Selector: neu-fieldset

import { NeuFieldsetComponent } from '@neural-ui/core/panel';

Usage

Use legend to name the group and project its controls. disabled applies native fieldset semantics; also bind disabled on custom controls so their visual and interaction state match the group. collapsible adds a legend toggle; collapsed plus collapsedChange allows controlled collapse. Without collapsed the component manages its own state.

Examples

Try the behavior and inspect the executable source in Code.

Contact details

Name

City

Try and configure

Change the options, try the result and inspect its generated template. Open Code for the full implementation.

Name

City

Legend

Disabled group

Collapsible

Collapsed

<neu-fieldset
  legend="Contact details"
  [disabled]="false"
  [collapsible]="true"
  [collapsed]="collapsed()"
  (collapsedChange)="collapsed.set($event)"
>
  <neu-input label="Name" [floatingLabel]="true" [disabled]="false" [value]="name()" (valueChange)="name.set($event)" />
  <neu-input label="City" [floatingLabel]="true" [disabled]="false" [value]="city()" (valueChange)="city.set($event)" />
</neu-fieldset>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const name = signal("Alex");

export const city = signal("Madrid");

export const collapsed = signal(false);

Data and content

collapsedChange proposes a collapse state when collapsed is supplied. Controls retain their individual value models; Fieldset does not create a form model or validation API.

Accessibility and keyboard

The legend names the form group. Its collapse button supports Tab, Enter and Space and is disabled with the group. Each projected control still needs its own accessible label.

Key	Action
`Tab`	Reach the enabled collapse button and focusable content.
`Enter`	On the collapse button, expand or collapse the content when available.
`Space`	On the collapse button, expand or collapse the content when available.

API

Inputs and Outputs match the pinned Core package. Named types link to their definitions. Templates include executable examples for each supported region.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`collapsed`	`boolean \| undefined`	`undefined`	`[collapsed]`	Applied collapse state; omit for internal state.
`collapsible`	`boolean`	`false`	`[collapsible]`	Show an expandable legend button.
`disabled`	`boolean`	`false`	`[disabled]`	Disable the native group; bind the same state to custom children.
`legend`	`string`	`''`	`[legend]`	Visible and accessible group name.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`collapsedChange`	`boolean`	`(collapsedChange)="onCollapsedChange($event)"`	Proposes the next collapse state when controlled.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`*` Related form controls View example	Content projection Every control retains its own label and value model.	`<ng-content />` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Form controls

*

Contact details

Name

City

Public Types

Open a type to inspect its definition and interface fields.

NeuScrollAreaVariantTypeScript

import type { NeuScrollAreaVariant } from '@neural-ui/core/panel';

// Public declaration (reference only)
export type NeuScrollAreaVariant = 'auto' | 'hover' | 'scroll' | 'always' | 'hidden';

NeuScrollPositionTypeScript

import type { NeuScrollPosition } from '@neural-ui/core/panel';

// Public declaration (reference only)
export interface NeuScrollPosition {
  clientHeight: number;
  clientWidth: number;
  left: number;
  scrollHeight: number;
  scrollWidth: number;
  top: number;
}

Styles and tokens

Use public tokens for surfaces, text, spacing and focus. Test your content in both themes and at narrow widths.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
No data