Entrada

import {
  Field,
  FieldDescription,

O input captura uma única linha de texto — nomes, e-mails, termos de busca. Construído sobre o componente Base UI Input, um wrapper fino sobre o <input> nativo, e vestido com a receita neobrutalista: borda grossa, sombra dura e um contorno de foco de alto contraste.

Quando usar:

• Formulários de login e cadastro — campos de e-mail, nome de usuário e senha combinados com Field e FieldLabel.
• Barras de busca — lado a lado com um Button, ou com ícones via InputGroup.
• Páginas de checkout e configurações — endereços, números de cartão e campos de perfil organizados em um FieldGroup.

Instalação#

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 />

Exemplos#

Básico#

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

export function InputBasic() {

Field#

Use Field, FieldLabel e FieldDescription para criar um campo com um rótulo e uma descrição.

import {
  Field,
  FieldDescription,

Field Group#

Use FieldGroup para exibir vários blocos Field e montar formulários.

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

Desabilitado#

Use a prop disabled para desabilitar o campo. Para estilizar o estado desabilitado, adicione o atributo data-disabled ao componente Field.

import {
  Field,
  FieldDescription,

Inválido#

Use a prop aria-invalid para marcar o campo como inválido. Para estilizar o estado inválido, adicione o atributo data-invalid ao componente Field.

import {
  Field,
  FieldDescription,

Arquivo#

Use a prop type="file" para criar um campo de seleção de arquivos.

import {
  Field,
  FieldDescription,

Em linha#

Use Field com orientation="horizontal" para criar um campo em linha. Combine com Button para criar um campo de busca com um botão.

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

Grade#

Use um layout em grade para posicionar vários campos lado a lado.

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

Obrigatório#

Use o atributo required para indicar os campos obrigatórios.

import {
  Field,
  FieldDescription,

Badge#

Use Badge no rótulo para destacar um campo recomendado.

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

Input Group#

Para adicionar ícones, texto ou botões dentro de um campo, use o componente InputGroup. Consulte o componente Input Group para ver mais exemplos.

import { InfoIcon } from "lucide-react"

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

Button Group#

Para adicionar botões a um campo, use o componente ButtonGroup. Consulte o componente Button Group para ver mais exemplos.

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

Formulário#

Um exemplo de formulário completo com vários campos, um select e um botão.

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

RTL#

Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.

"use client"

import * as React from "react"

Acessibilidade#

Input renderiza um <input> nativo, então edição pelo teclado, foco e envio de formulário dispensam qualquer configuração ARIA. O que sobra fica por sua conta:

• Rotule todo input. Associe-o a um FieldLabel (ou a um <label htmlFor>) — placeholder não é rótulo; ele some assim que o usuário digita e não é anunciado de forma confiável.
• Associe o texto de erro. Defina aria-invalid no input e aponte aria-describedby para o id do seu FieldError ou FieldDescription, para que os leitores de tela leiam a mensagem junto com o campo.
• Escolha o type e o autocomplete certos. type="email" com autocomplete="email" garante o teclado correto no celular e o preenchimento automático.