---
url: "https://vueda.dev/v3/reference/theming/keys/Input.md"
title: "Input"
---

# 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](/v3/reference/api/vue/Input.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/Input.md#theme-key-Input-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. |

<a id="theme-key-Input-root"></a>

## 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:

```text
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`