Componentes

Input

Entrada de texto de uma linha.

Campos e formulários

Carregando demonstração…

Código da demo
"use client";

import * as React from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function Demo() {
  const [value, setValue] = React.useState("");

  return (
    <div className="grid w-full max-w-sm gap-fe-2">
      <Label htmlFor="demo-input">Nome</Label>
      <Input
        id="demo-input"
        placeholder="Digite..."
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Input disabled placeholder="Desabilitado" />
    </div>
  );
}

Use

  • Sempre com rótulo visível (FieldLabel) ligado pelo htmlFor.
  • type certo (email, tel, number) para o teclado certo no celular.

Não use

  • Não use placeholder como rótulo.
  • Não valide a cada tecla: valide ao sair do campo.
  • Não use para texto longo: use Textarea.
Acessibilidade
Sempre com Label; aria-invalid em erro.
Importar
import { Input } from "@financeequity/ui/input"

Neste repositório:

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