Fieldset

Agrupa controles de formulario relacionados con una leyenda nativa.

Categoría: Diseño y contenido
Import: @neural-ui/core/panel
Selector: neu-fieldset

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

Uso

Usa legend para nombrar el grupo y proyecta sus controles. disabled aplica la semántica nativa del fieldset; enlaza también disabled en los controles personalizados para que su apariencia e interacción coincidan con el grupo. collapsible añade una acción en la leyenda; collapsed junto con collapsedChange permite controlar el plegado. Sin collapsed, el componente gestiona su estado.

Ejemplos

Prueba el comportamiento y consulta el código ejecutable en Código.

Datos de contacto

Nombre

Ciudad

Prueba y configura

Cambia las opciones, prueba el resultado y consulta su template generado. Abre Código para ver la implementación completa.

Nombre

Ciudad

Leyenda

Grupo deshabilitado

Plegable

Plegado

<neu-fieldset
  legend="Datos de contacto"
  [disabled]="false"
  [collapsible]="true"
  [collapsed]="collapsed()"
  (collapsedChange)="collapsed.set($event)"
>
  <neu-input label="Nombre" [floatingLabel]="true" [disabled]="false" [value]="name()" (valueChange)="name.set($event)" />
  <neu-input label="Ciudad" [floatingLabel]="true" [disabled]="false" [value]="city()" (valueChange)="city.set($event)" />
</neu-fieldset>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

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

export const name = signal("Alex");

export const city = signal("Madrid");

export const collapsed = signal(false);

Datos y contenido

collapsedChange propone el estado de plegado cuando se proporciona collapsed. Los controles conservan sus modelos de valor individuales; Fieldset no crea un modelo de formulario ni una API de validación.

Accesibilidad y teclado

La leyenda identifica el grupo del formulario. Su botón de plegado admite Tab, Intro y Espacio y se deshabilita junto con el grupo. Cada control proyectado sigue necesitando su propia etiqueta accesible.

Tecla	Acción
`Tab`	Accede al botón habilitado de contraer y al contenido enfocable.
`Enter`	En el botón de contraer, expande o contrae el contenido cuando está disponible.
`Space`	En el botón de contraer, expande o contrae el contenido cuando está disponible.

API

Los Inputs y Outputs corresponden al paquete Core fijado. Los tipos con nombre enlazan a sus definiciones. Templates incluye ejemplos ejecutables de cada zona disponible.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`collapsed`	`boolean \| undefined`	`undefined`	`[collapsed]`	Estado de plegado aplicado; omítelo para usar el estado interno.
`collapsible`	`boolean`	`false`	`[collapsible]`	Muestra un botón desplegable en la leyenda.
`disabled`	`boolean`	`false`	`[disabled]`	Deshabilita el grupo nativo; enlaza el mismo estado en los hijos personalizados.
`legend`	`string`	`''`	`[legend]`	Nombre visible y accesible del grupo.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`collapsedChange`	`boolean`	`(collapsedChange)="onCollapsedChange($event)"`	Propone el siguiente estado de plegado en modo controlado.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`*` Controles de formulario relacionados Ver ejemplo	Proyección de contenido Cada control mantiene su etiqueta y su modelo de valor.	`<ng-content />` Contexto utilizado: `—`

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

Controles del formulario

*

Datos de contacto

Nombre

Ciudad

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuScrollAreaVariantTypeScript

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

// Declaración pública (solo referencia)
export type NeuScrollAreaVariant = 'auto' | 'hover' | 'scroll' | 'always' | 'hidden';

NeuScrollPositionTypeScript

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

// Declaración pública (solo referencia)
export interface NeuScrollPosition {
  clientHeight: number;
  clientWidth: number;
  left: number;
  scrollHeight: number;
  scrollWidth: number;
  top: number;
}

Estilos y tokens

Utiliza los tokens públicos de superficie, texto, espaciado y foco. Comprueba el contenido en ambos temas y con anchos reducidos.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
Sin datos