TextField — Sinapse Design System

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

export function TextFieldExample() {
  return <Input type="email" placeholder="[email protected]" />
}

<script setup lang="ts">
import { Input } from '@/components/ui/input'
</script>

<template>
  <Input type="email" placeholder="[email protected]" />
</template>

<div class="itps-textfield">
  <i class="itps-textfield__icon ti ti-mail" aria-hidden="true"></i>
  <input class="itps-textfield__input" type="email" placeholder="[email protected]" />
</div>

Instalação

Instale o Input da sua stack e rode o comando individual ITpS em seguida. O comando itps add textfield é theme-only: ele valida o slug e confirma que o contrato visual vem do tema ITpS, das classes copy-first e dos snippets desta página.

terminal · React/Next

pnpm dlx shadcn@latest add input
pnpm dlx github:ITPS/sinapse-ui-cli add textfield

terminal · Vue3/Nuxt4

pnpm dlx shadcn-vue@latest add input
pnpm dlx github:ITPS/sinapse-ui-cli add textfield

O comando individual adapta só este componente; não instala o catálogo inteiro.

Uso

Em React/Next com shadcn/ui e Vue3/Nuxt4 com shadcn-vue, use o Input instalado pela stack. O tema ITpS vem dos tokens aplicados pela CLI.

Use itps-textfield quando precisar do contrato copy-first com pill, ícones internos ou composição direta em HTML.

Exemplos

Tamanhos

Uso	React/Next e Vue3/Nuxt4	HTML
Pequeno	defina no componente instalado, quando existir	`itps-textfield--sm`
Padrão	default do `Input`	sem modificador
Grande	defina no componente instalado, quando existir	`itps-textfield--lg`

Nas classes itps-textfield, os tamanhos seguem o token form-height: 40, 48 e 56px.

Estados

Estado	React/Next e Vue3/Nuxt4	HTML
Desabilitado	`disabled`	`is-disabled` no wrapper e `disabled` no input
Inválido	`aria-invalid="true"`	`is-invalid` no wrapper e `aria-invalid="true"` no input
Preenchido	valor controlado ou `defaultValue`	valor no input

Associe mensagens de ajuda ou erro com aria-describedby.

Ícones

Ícones internos do itps-textfield são decorativos ou indicadores e devem usar aria-hidden="true". Para ações, como revelar senha ou limpar busca, use um botão nomeado com aria-label.

Com Field

Use Field como composição visual: label, ajuda e mensagens ficam fora do TextField.

Telefone

Use DDD + número.

<div class="itps-field">
  <label for="phone" class="itps-field__label">
    Telefone <span class="itps-field__required" aria-hidden="true">*</span>
  </label>
  <div class="itps-textfield">
    <input
      id="phone"
      name="phone"
      type="tel"
      class="itps-textfield__input"
      placeholder="(11) 99999-9999"
      required
      aria-describedby="phone-help"
    />
  </div>
  <p id="phone-help" class="itps-field__hint">Use DDD + número.</p>
</div>

API copy-first

Classe/atributo	Uso
`itps-textfield`	Wrapper visual do campo pill.
`itps-textfield__input`	Input interno sem borda própria.
`itps-textfield__icon`	Ícone interno decorativo ou indicador.
`itps-textfield__icon--danger`	Ícone de erro em estado inválido.
`itps-textfield--sm`	Altura 40px.
`itps-textfield--lg`	Altura 56px.
`is-disabled`	Estado desabilitado no wrapper.
`is-invalid`	Estado inválido no wrapper.
`disabled`	Desabilita o input nativo.
`aria-invalid="true"`	Comunica estado inválido.
`aria-describedby`	Liga o controle ao texto de apoio ou erro.
`aria-hidden="true"`	Esconde ícones decorativos de tecnologias assistivas.

Acessibilidade

Associe labels externos com for/id. Use aria-describedby para texto de apoio ou erro. Ícones decorativos devem usar aria-hidden="true"; ações dentro do campo precisam ser botões nomeados.