Saltar al contenido
VEXA
enes
Formularios

Input

Apto para servidor

A single-line text field.

Vista previa en vivo

Renderizado desde el código fuente instalado de VEXA — los mismos archivos que recibes.

Escritorio

Playground

Ajusta las props y copia el JSX equivalente.

Playground

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

Instalación

Añade el código del componente a tu proyecto. Las dependencias del registry se resuelven automáticamente.

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

Se instala en components/vexa/input.tsx

Dependencias npm

Sin dependencias npm externas.

Dependencias del registry

  • @vexa/utils

Otros items de VEXA que necesita este componente. Instálalos primero — la CLI los resuelve automáticamente.

Código

Cópialo a su ruta destino, o instálalo con el comando de arriba.

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}
    />
  );
}
JSON del registryr/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"
  }
}

Detalles

Accesibilidad

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

Uso

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

Anatomía

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

Accesibilidad

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

Teclado

TeclaAcción
NativeStandard text editing and caret movement

Foco: 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`.

Buenas prácticas

Recomendado

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

Evitar

  • 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`.
Editar esta página

¿Te ha resultado útil esta página?

Guardado localmente en este navegador. Sin cuenta ni servidor.