Forms

Input

Name: VEXA
Author: Valfiguer

Server-safe

A single-line text field.

Live preview

Rendered from the installed VEXA source — the same files you receive.

Playground

Adjust the props and copy the matching JSX.

Playground

placeholder

disabled

aria-invalid

input.tsx

<Input placeholder="you@company.com" />

Installation

Adds the component source to your project. Registry dependencies are pulled in automatically.

npx shadcn@latest add https://vexa.valfiguer.com/r/input.json

Installs to components/vexa/input.tsx

npm dependencies

No external npm dependencies.

Registry dependencies

@vexa/utils

Other VEXA items this component needs. Install them first — they are resolved automatically by the CLI.

Source

Copy this into its target path, or install it with the command above.

components/vexa/input.tsx

import type * as React from "react";

import { cn } from "@/lib/utils";

/**
 * Input — a single-line text field.
 *
 * RSC-safe as static markup; add `onChange`/controlled state from a Client
 * Component. States covered: default, focus-visible, disabled, read-only, and
 * invalid (set `aria-invalid` — validity is not communicated by color alone,
 * the border and ring both change). Always pair with a `<Label htmlFor>`.
 */
export function Input({
  className,
  type = "text",
  ...props
}: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "flex h-10 w-full rounded-vexa-md border border-vexa-input bg-vexa-surface-raised px-3 py-2 text-sm text-vexa-foreground shadow-vexa-sm",
        "transition-[color,box-shadow,border-color] duration-[var(--vexa-duration-fast)]",
        "placeholder:text-vexa-muted-foreground",
        "outline-none focus-visible:border-vexa-focus focus-visible:ring-2 focus-visible:ring-vexa-ring focus-visible:ring-offset-1 focus-visible:ring-offset-vexa-background",
        "disabled:cursor-not-allowed disabled:opacity-60",
        "read-only:bg-vexa-muted read-only:text-vexa-muted-foreground",
        "aria-[invalid=true]:border-vexa-danger aria-[invalid=true]:focus-visible:ring-vexa-danger",
        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-vexa-foreground",
        className,
      )}
      {...props}
    />
  );
}

Registry JSONr/input.json

r/input.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "type": "registry:ui",
  "title": "Input",
  "description": "A single-line text field.",
  "registryDependencies": [
    "@vexa/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/input.tsx",
      "type": "registry:ui",
      "target": "components/vexa/input.tsx",
      "content": "import type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Input — a single-line text field.\n *\n * RSC-safe as static markup; add `onChange`/controlled state from a Client\n * Component. States covered: default, focus-visible, disabled, read-only, and\n * invalid (set `aria-invalid` — validity is not communicated by color alone,\n * the border and ring both change). Always pair with a `<Label htmlFor>`.\n */\nexport function Input({\n  className,\n  type = \"text\",\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"flex h-10 w-full rounded-vexa-md border border-vexa-input bg-vexa-surface-raised px-3 py-2 text-sm text-vexa-foreground shadow-vexa-sm\",\n        \"transition-[color,box-shadow,border-color] duration-[var(--vexa-duration-fast)]\",\n        \"placeholder:text-vexa-muted-foreground\",\n        \"outline-none focus-visible:border-vexa-focus focus-visible:ring-2 focus-visible:ring-vexa-ring focus-visible:ring-offset-1 focus-visible:ring-offset-vexa-background\",\n        \"disabled:cursor-not-allowed disabled:opacity-60\",\n        \"read-only:bg-vexa-muted read-only:text-vexa-muted-foreground\",\n        \"aria-[invalid=true]:border-vexa-danger aria-[invalid=true]:focus-visible:ring-vexa-danger\",\n        \"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-vexa-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "meta": {
    "frameworks": [
      "react",
      "next"
    ],
    "rsc": "server-safe-markup",
    "cssVars": [
      "--vexa-input",
      "--vexa-surface-raised",
      "--vexa-foreground",
      "--vexa-muted",
      "--vexa-muted-foreground",
      "--vexa-focus",
      "--vexa-ring",
      "--vexa-danger",
      "--vexa-background"
    ],
    "a11y": "Pair with <Label htmlFor>. Invalid state uses aria-invalid and changes border + ring (not color alone). Read-only and disabled states styled.",
    "example": "<Input id=\"email\" type=\"email\" placeholder=\"you@company.com\" />",
    "tests": "registry/tests/input.test.tsx"
  }
}

Details

Accessibility

Pair with <Label htmlFor>. Invalid state uses aria-invalid and changes border + ring (not color alone). Read-only and disabled states styled.

Usage

Single-line text entry. Wire it to a `<Label htmlFor>` and, for hints or errors, wrap it in a `Field`.

Anatomy

Input: Styled native `<input>`; forwards every native prop and the ref.

Accessibility

Native input semantics. `aria-invalid` drives the error style — a border + ring change, not color alone.

Keyboard

Key	Action
`Native`	Standard text editing and caret movement

Focus: Visible focus ring; read-only and disabled states are styled distinctly.

Provide a visible, associated Label (WCAG 3.3.2). Describe errors via `aria-describedby` — use `Field`.

Guidelines

Do

Pair with a `<Label htmlFor>`.
Set `type` / `inputMode` / `autoComplete` appropriately.
Signal invalid with `aria-invalid` plus a described error.

Don't

Don't use the placeholder as the label.
Don't convey invalid by color alone.
Don't disable an input to show read-only data — use `readOnly`.

Edit this page

Was this page helpful?

Stored locally in this browser. No account or server needed.