Input

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

The single-line input shell and the reference recipe for the input-shaped family. Carbon-style field edge: a bg-field fill on a bottom-only field-line at rest, a hover:bg-field-hover step, the same bottom-only line recoloured to --ring on focus, --warning under data-warning, and --destructive on invalid while the separate focus ring carries the full perimeter, 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 drops the fill and softens the line to --border, so a read-only field reads as display rather than editable; 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	11 classes	The single-line input shell and the reference recipe for the input-shaped family. Carbon-style field edge: a bg-field fill on a bottom-only field-line at rest, a hover:bg-field-hover step, the same bottom-only line recoloured to --ring on focus, --warning under data-warning, and --destructive on invalid while the separate focus ring carries the full perimeter, 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 drops the fill and softens the line to --border, so a read-only field reads as display rather than editable; 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. Carbon-style field edge: a bg-field fill on a bottom-only field-line at rest, a hover:bg-field-hover step, the same bottom-only line recoloured to --ring on focus, --warning under data-warning, and --destructive on invalid while the separate focus ring carries the full perimeter, 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 drops the fill and softens the line to --border, so a read-only field reads as display rather than editable; 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
field-line h-vueda-control w-full min-w-0 rounded-vueda-field bg-field hover:bg-field-hover px-vueda-control-px text-base transition-shadow
file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium
md:text-sm
disabled:pointer-events-none disabled:cursor-not-allowed
disabled:!bg-disabled disabled:!text-disabled-foreground disabled:!hairline-border
disabled:[-webkit-text-fill-color:var(--disabled-foreground)]
focus-visible:hairline-ring focus-visible:focus-ring-shadow
data-[warning=true]:not-aria-invalid:hairline-warning
aria-invalid:hairline-destructive aria-invalid:focus-visible:focus-ring-shadow-destructive
read-only:bg-transparent read-only:hover:bg-transparent read-only:hairline-border read-only:cursor-default

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