Components / Field

Field

A compositional field that keeps native label, description and error wiring explicit.

Email addressWe only use this for project updates.

example.component.html

html

<aevko-field>
  <label aevkoFieldLabel for="email">
    Email
  </label>
  <input id="email" aria-describedby="email-help" />
</aevko-field>

Installation

npx aevko-ui@latest add field --yes

Source ownership

Keep label, help and error content explicit, then control layout through the field host. Nothing is hidden behind generated form metadata.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

Property or slot	Type	Default	Description
`invalid`	`boolean`	`false`	Marks the group invalid for styling and semantics.
`aevkoFieldLabel`	`projected slot`	`empty`	Native label or custom label content.
`aevkoFieldDescription`	`projected slot`	`empty`	Help text referenced by the control.
`aevkoFieldError`	`projected slot`	`empty`	Validation message shown by the consumer.

Accessibility contract

Pair for/id values and reference help or error ids from aria-describedby on the actual control.