Panel

Group content under a heading with optional collapse.

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

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

Usage

Set header and project the body. Enable collapsible to show the header action, and translate expandLabel and collapseLabel. Bind collapsed for controlled state or omit it and use initialCollapsed to seed an uncontrolled instance. A collapsible panel keeps its action available even without a title.

Examples

Try the behavior and inspect the executable source in Code.

Try and configure

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

Delivery is included in this order.

Header

Expand label

Collapse label

Collapsible

Collapsed

Advanced options · 1

<neu-panel
  header="Order details"
  [collapsible]="true"
  [collapsed]="collapsed()"
  (collapsedChange)="collapsed.set($event)"
  expandLabel="Expand"
  collapseLabel="Collapse"
>
  <p>Delivery is included in this order.</p>
</neu-panel>

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 collapsed = signal(false);

Data and content

collapsedChange proposes the next boolean state. Accept it by updating collapsed in controlled mode. Initial state applies once, not on every change. Projected actions are application-owned.

Accessibility and keyboard

The native header button supports Tab, Enter and Space. Its expanded state is announced. Keep the heading descriptive and the expand/collapse labels meaningful in the current language.

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; undefined enables uncontrolled mode once.
`collapseLabel`	`string`	`'Collapse'`	`[collapseLabel]`	Visible text of the collapse button.
`collapsible`	`boolean`	`false`	`[collapsible]`	Show the collapse action when the header is present.
`expandLabel`	`string`	`'Expand'`	`[expandLabel]`	Visible text of the expand button.
`header`	`string`	`''`	`[header]`	Visible panel heading.
`initialCollapsed`	`boolean`	`false`	`[initialCollapsed]`	One-time collapse seed when collapsed is omitted.

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 boolean collapse state.

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
`*` Panel body View example	Content projection Project content and application-owned actions.	`<ng-content />` Context used: `—`

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

Panel body

*

Projected content can include actions.

Confirmations: 0

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
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-focus-ring`	Normal keyboard-focus ring	Shared by other Core consumers; scope the override.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-surface-3`	Hover and raised control surfaces	Shared by other Core consumers; scope the override.	`#e2e8f0`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-scroll-area-thumb`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`var(--neu-border)`