primitives

Forms

Nuxt UI form primitives with TTI theming — maroon focus rings, consistent label styling, and the tux heading--bold for section titles inside forms. No Tux wrappers here yet: Nuxt UI's form primitives don't need deviation to fit the brand.

Text inputs

Required fields marked with a maroon dot

Filter by title or keyword.
ISO date.
Markdown supported. Appears in the project card.

Select & radio

Single choice from a bounded set

PII / confidential

Full technical report with findings + methodology

Internal memorandum, shorter format

Executive summary, 1–2 pages

Checkboxes & switch

Boolean toggles and multi-select

When off, only TAMUS-authenticated users can see this record.

Slider

Continuous range inputs

Only records scoring above this threshold are surfaced to reviewers.

Chip input

Token-style list with inline add

topic:safety topic:mobility
Used to cross-link related records.

State preview: { "text": "", "password": "", "search": "", "selected": "sensitive", "radio": "report", "checks": { "notify": true, "archive": false, "public": false }, "toggle": true, "slider": 50, "date": "", "chips": [ "topic:safety", "topic:mobility" ] }

Validation

Nuxt UI 4 ships with validation via UForm + a schema library of your choice (Zod, Valibot, Yup). The showcase above uses bare UFormFields for clarity; in production apps, wrap in <UForm :schema="..." :state="..."> and Nuxt UI handles error display automatically. Errors adopt the maroon focus ring and --color-error text — no extra styling needed.

Focus rings

All interactive elements get the TTI maroon focus ring via --shadow-focus in tokens.css. Tab through the form above to see — the ring adapts to theme (lighter in dark mode, fully black in high-contrast).