Input

Source: client/lib/theme/vueda-tailwind/controls/index.js

The single-line input shell and the reference recipe for the input-shaped family. Hairline border with the system focus-ring contract, control-height tier from base.css § Control sizing, and the cross-cutting aria-invalid swap that paints --destructive on the border and ring. Read-only and dark-mode states follow the shared input conventions; the file-picker variant (<input type=file>) inherits file: classes so a bare file input reads as the same chip family as a button.

Vue component: Input

Slot	Default classes	Description
root	7 classes	The single-line input shell and the reference recipe for the input-shaped family. Hairline border with the system focus-ring contract, control-height tier from base.css § Control sizing, and the cross-cutting aria-invalid swap that paints --destructive on the border and ring. Read-only and dark-mode states follow the shared input conventions; the file-picker variant (<input type=file>) inherits file: classes so a bare file input reads as the same chip family as a button.

root

The single-line input shell and the reference recipe for the input-shaped family. Hairline border with the system focus-ring contract, control-height tier from base.css § Control sizing, and the cross-cutting aria-invalid swap that paints --destructive on the border and ring. Read-only and dark-mode states follow the shared input conventions; the file-picker variant (<input type=file>) inherits file: classes so a bare file input reads as the same chip family as a button.

Default classes:

file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30
hairline h-vueda-control w-full min-w-0 rounded-vueda-field bg-transparent px-vueda-control-px text-base shadow-vueda-control transition-shadow
file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium
disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
focus-visible:hairline-ring focus-visible:focus-ring-shadow
aria-invalid:hairline-destructive aria-invalid:focus-visible:focus-ring-shadow-destructive
read-only:bg-muted/50 read-only:cursor-default

Source: client/lib/theme/vueda-tailwind/controls/Input.theme.js:18