Input Text
Coleta texto curto, dados estruturados ou valores de uma única linha.
- Status
- Beta
- Distribuição
- Source via shadcn
Design
Preview funcional
Carregando preview funcional…
Explorar anatomia e estados visuais
Anatomia
- Container
- Input nativo
Variantes e estados
disablederrorfilledlgmdreadonlysm
Uso
Quando usar
- a pessoa precisa informar um valor curto ou previsível.
Quando não usar
- o conteúdo exige múltiplas linhas ou uma seleção entre opções conhecidas.
Composição React
import { Input } from "@/components/ui/input"
<Input
id="email"
name="email"
type="email"
aria-label="E-mail"
placeholder="nome@empresa.com"
/>Implementação
Instalação
Configure o namespace uma única vez na integração React.
npx shadcn@latest add @tis/inputpnpm dlx shadcn@latest add @tis/inputyarn dlx shadcn@latest add @tis/inputbunx --bun shadcn@latest add @tis/inputContrato público
- Item do registry
@tis/input- Distribuição
- Source copiado para a aplicação
- Status
- Beta
Arquitetura técnica
- Provider
- Base UI
- Papel do provider
- Provider da saída React
- Arquitetura comportamental
- Base UI
- CSS
ds-tis/css
Acessibilidade
Semântica e comportamento
Forneça label visível sempre que possível e conecte helper/error com aria-describedby e aria-invalid.
Responsabilidade do consumidor
- fornecer nomes e descrições acessíveis contextuais;
- preservar teclado, foco visível e HTML semântico;
- testar conteúdo, fluxo e contraste reais na aplicação.
Evidência de validação
Instalado no consumer React/Vite permanente e coberto por build de produção, browser, responsividade e Axe.