Skip to main content

components · forms & controls

TuxFormField

The canonical form-field wrapper: consistently arranges label, required indicator, info-popover help, input slot with automatic a11y attributes, hint text, and inline validation errors.

Interactive Component Playground

TuxFormField Workbench

Presets:

Institutional @tti.tamu.edu address preferred.

Properties Inspector6 configurable knobs
Field Labellabel
Layout Geometrylayout
Required Fieldrequired
true
Hint Texthint
Info Popover Helphelp
Validation Error Messageerror
Dynamic Component Syntax
<TuxFormField
  label="Principal Investigator Email" required hint="Institutional @tti.tamu.edu address preferred." help="Used strictly for project notification dispatches and access verification."
>
  <template #default="{ inputId, ariaDescribedby, ariaInvalid, ariaRequired }">
    <UInput
      :id="inputId"
      type="text"
      :aria-describedby="ariaDescribedby"
      :aria-invalid="ariaInvalid"
      :aria-required="ariaRequired"
    />
  </template>
</TuxFormField>

usage syntax

Standard Form Field Cluster

Institutional @tti.tamu.edu address preferred.

<TuxFormField
  label="Principal Investigator Email"
  layout="stacked"
  required
  help="Used strictly for project notification dispatches and access verification."
  hint="Institutional @tti.tamu.edu address preferred."
>
  <template #default="{ inputId, ariaDescribedby, ariaInvalid, ariaRequired }">
    <UInput
      :id="inputId"
      v-model="email"
      type="email"
      placeholder="researcher@tti.tamu.edu"
      :aria-describedby="ariaDescribedby"
      :aria-invalid="ariaInvalid"
      :aria-required="ariaRequired"
    />
  </template>
</TuxFormField>

api reference

Props & Scoped Slot

PropTypeDefaultDescription
labelstringrequiredPrimary label rendered above or adjacent to the input element.
helpstringundefinedAdditional context revealed via an accessible info-icon popover.
hintstringundefinedPermanently visible supplementary instruction text beneath the label.
errorstringundefinedValidation error message; automatically wires aria-invalid on the input.
layout"stacked" | "inline""stacked"Arrangement geometry for label and input elements.