Field Nuevo

El componente hp-field orquesta automáticamente la accesibilidad entre etiquetas, descripciones, mensajes de error y controles de formulario. Genera IDs únicos y vincula aria-labelledby, aria-describedby y for sin intervención manual.

Demostración

Sin estilos (solo base.css)

EmailNo enviamos spam.Email inválido.

Con estilos personalizados

Nombre de UsuarioEste es el nombre público en tu perfil.El nombre ya está en uso.

index.html

<hp-field class="field-container">
  <hp-field-label>Email</hp-field-label>
  <hp-field-description>No enviamos spam.</hp-field-description>
  <hp-field-control>
    <input type="email" />
  </hp-field-control>
  <hp-field-error>Email inválido.</hp-field-error>
</hp-field>

style.css

.field-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

hp-field-label {
  font-weight: bold;
}
hp-field-description {
  font-size: 12px;
  color: gray;
}
hp-field-error {
  color: red;
}

Instalación

pnpm

pnpm add @headless-primitives/field

npm

npm install @headless-primitives/field

yarn

yarn add @headless-primitives/field

bun

bun add @headless-primitives/field

Features

• ♿️ aria-labelledby, aria-describedby y for gestionados automáticamente.
• 🔗 Contexto por proximidad — los sub-componentes coordinan IDs con el hp-field ancestro.
• 🎨 Sin estilos visuales (Headless).
• 📋 Soporte para label, description, error y control.

Anatomía

<hp-field>
  <hp-field-label></hp-field-label>
  <hp-field-description></hp-field-description>
  <hp-field-control>
    <input type="text" />
  </hp-field-control>
  <hp-field-error></hp-field-error>
</hp-field>

API Reference

hp-field

Contenedor raíz que genera un baseId estable para coordinar IDs.

Propiedades de solo lectura

Propiedad	Tipo	Descripción
baseId	string	Prefijo único para IDs de label, control, descripción y error.

Atributos ARIA gestionados automáticamente

• role="group" — Asignado si no se especifica.

hp-field-label

Label accesible para el control.

Atributos gestionados automáticamente

• for — Apunta a {baseId}-control si no se especifica.
• id — Se asigna {baseId}-label si no se especifica.

hp-field-description

Descripción del campo.

Atributos gestionados automáticamente

• id — Se asigna {baseId}-description. Incluido en aria-describedby del control.

hp-field-error

Mensaje de error del campo.

Atributos ARIA gestionados automáticamente

• role="alert" — Asignado si no se especifica.
• id — Se asigna {baseId}-error. Incluido en aria-describedby del control.

hp-field-control

Wrapper del control real. Inyecta id, aria-labelledby y aria-describedby automáticamente.

Accesibilidad

hp-field garantiza vinculación semántica automática entre label, description, error y control, cumpliendo los estándares WAI-ARIA para Labels and Descriptions.