PrimitiveDisponible

Input

Campo de texto con foco evidente, estados deshabilitados y señal de error accesible.

Student name

Use the same name shown in your profile.

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/input.json

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

import { Input } from "@/components/ui/input"

export function Example() {
  return <Input aria-label="Your name" placeholder="Type your name" />
}

Opciones visuales incluidas en la API oficial del componente.

Aspecto, comportamiento y comprobación con teclado.

Reposo · enfoca con TabCon contenidoErrorEscribe un correo completo.Deshabilitado

Reposo, contenido, foco, error y deshabilitado. El error usa aria-invalid y un mensaje asociado; el color no es la única señal.
No se valida por pasar el cursor. Solo la aplicación decide cuándo mostrar errores.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
type	HTMLInputTypeAttribute	text	Define el tipo nativo del campo.
aria-invalid	boolean \| grammar \| spelling	false	Activa el estado visual de error.
disabled	boolean	false	Desactiva edición y foco.

Reglas que deben conservarse cuando el componente se adapte a un producto.

Cada Input necesita label visible o aria-label.

Relaciona mensajes de error con aria-describedby.

No uses placeholder como sustituto permanente de la etiqueta.