Entrada

import {
  Field,
  FieldDescription,

El input captura una sola línea de texto: nombres, correos, consultas de búsqueda. Está construido sobre el componente Base UI Input, una envoltura fina sobre el <input> nativo, y vestido con la receta neobrutalista: borde grueso, sombra marcada y un contorno de foco de alto contraste.

Recurre a este componente cuando:

• Formularios de acceso y registro — campos de correo, usuario y contraseña combinados con Field y FieldLabel.
• Barras de búsqueda — en línea con un Button, o con iconos mediante InputGroup.
• Páginas de pago y ajustes — direcciones, números de tarjeta y campos de perfil dispuestos en un FieldGroup.

Instalación#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
npx shadcn@latest add https://neobrutalism.com/r/base/input.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/input.json
Copiar

import * as React from "react"

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

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "h-8 w-full min-w-0 rounded border-2 bg-input px-3 py-2 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Input }

Uso#

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

Copiar<Input />

Ejemplos#

Básico#

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

export function InputBasic() {

Field#

Usa Field, FieldLabel y FieldDescription para crear un campo con una etiqueta y una descripción.

import {
  Field,
  FieldDescription,

Field Group#

Usa FieldGroup para mostrar varios bloques Field y construir formularios.

import { Button } from "@/components/ui/button"
import {
  Field,

Deshabilitado#

Usa la prop disabled para deshabilitar el campo. Para aplicar estilos al estado deshabilitado, añade el atributo data-disabled al componente Field.

import {
  Field,
  FieldDescription,

No válido#

Usa la prop aria-invalid para marcar el campo como no válido. Para aplicar estilos al estado no válido, añade el atributo data-invalid al componente Field.

import {
  Field,
  FieldDescription,

Archivo#

Usa la prop type="file" para crear un campo de selección de archivos.

import {
  Field,
  FieldDescription,

En línea#

Usa Field con orientation="horizontal" para crear un campo en línea. Combínalo con Button para crear un campo de búsqueda con un botón.

import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Cuadrícula#

Usa una disposición en cuadrícula para colocar varios campos uno al lado del otro.

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Obligatorio#

Usa el atributo required para indicar los campos obligatorios.

import {
  Field,
  FieldDescription,

Badge#

Usa Badge en la etiqueta para destacar un campo recomendado.

import { Badge } from "@/components/ui/badge"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Input Group#

Para añadir iconos, texto o botones dentro de un campo, usa el componente InputGroup. Consulta el componente Input Group para ver más ejemplos.

import { InfoIcon } from "lucide-react"

import { Field, FieldLabel } from "@/components/ui/field"

Button Group#

Para añadir botones a un campo, usa el componente ButtonGroup. Consulta el componente Button Group para ver más ejemplos.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"

Formulario#

Un ejemplo de formulario completo con varios campos, un select y un botón.

import { Button } from "@/components/ui/button"
import {
  Field,

RTL#

Para activar el soporte RTL en Neobrutalism, consulta la guía de configuración de RTL.

"use client"

import * as React from "react"

Accesibilidad#

Input renderiza un <input> nativo, así que la edición con teclado, el foco y el envío del formulario no necesitan configuración ARIA. Lo que queda corre de tu cuenta:

• Etiqueta todos los inputs. Acompáñalo de un FieldLabel (o de un <label htmlFor>): un placeholder no es una etiqueta; desaparece al escribir y no se anuncia de forma fiable.
• Asocia el texto de error. Establece aria-invalid en el input y apunta aria-describedby al id de tu FieldError o FieldDescription para que los lectores de pantalla lean el mensaje junto con el campo.
• Elige bien type y autocomplete. type="email" más autocomplete="email" consigue el teclado móvil correcto y el autocompletado.