Skip to main content

components · forms & controls

TuxValidationSummary

Aggregated top-of-form error summary box. Gathers all form issues into a single, accessible landmark with clickable anchor links that immediately jump to and focus the invalid input.

interactive showcase

Error List & Field Jumping

Tone:

usage syntax

Code snippet

vue
<TuxValidationSummary
  variant="error"
  title="Please correct the 4 issues below:"
  :errors="[
    { fieldId: 'fld-title', fieldLabel: 'Project Title', message: 'Title must be between 10 and 120 characters.' },
    { fieldId: 'fld-pi-email', fieldLabel: 'PI Email', message: 'Enter a valid @tti.tamu.edu address.' },
    { fieldId: 'fld-grant-num', fieldLabel: 'Grant Number', message: 'Grant identifier format must match syntax.' },
    { message: 'You must confirm compliance with export control policy.' },
  ]"
/>

api reference

Props

PropTypeDefaultDescription
errorsTuxValidationError[]requiredArray of error messages, optional fieldId targets, and field labels.
titlestring"Please fix the following before submitting:"Heading text rendered above the error list.
variant"error" | "warning""error"Visual styling tone for blocking errors vs advisory warnings.