Text field

Use native <input> for short text entry. In Nuxt / PLAI use UInput.

Element	Source
Border, surface, placeholder, disabled	Nuxt UI zinc / UInput defaults
Focus border and ring	CI --ci-color-text-link
Error state	Nuxt UI semantic red

Live examples

Case reference

Internal reference for your firm.

Email

Password

Error and disabled

Email

Enter a valid email address.

Locked field

HTML

<label class="ci-label" for="ref">Case reference</label>
<input id="ref" class="ci-input" type="text" autocomplete="off" />

Accessibility

• Pair every control with a <label for="…"> (or wrap the input in the label).
• Use aria-invalid="true" and aria-describedby pointing to .ci-error for validation messages.
• Focus ring: 3px accent halo on the border change.
• Choose the correct type and autocomplete for password managers and mobile keyboards.

See Form layout for label + hint + error structure.