TextField — Sinapse Design System

Sizes

Três alturas alinhadas ao token form-height: 40 / 48 / 56.

<TextField size="sm" placeholder="Small (40px)" />
<TextField size="md" placeholder="Medium (48px)" />
<TextField size="lg" placeholder="Large (56px)" />

<template>
<input class="itps-input h-10 text-sm" placeholder="Small (40px)" />
<input class="itps-input" placeholder="Medium (48px)" />
<input class="itps-input h-14 text-base" placeholder="Large (56px)" />
</template>

<>
<input className="itps-input h-10 text-sm" placeholder="Small (40px)" />
<input className="itps-input" placeholder="Medium (48px)" />
<input className="itps-input h-14 text-base" placeholder="Large (56px)" />
</>

<input class="itps-input h-10 text-sm" placeholder="Small (40px)" />
<input class="itps-input" placeholder="Medium (48px)" />
<input class="itps-input h-14 text-base" placeholder="Large (56px)" />

Estados

Default, filled, disabled, invalid.

<TextField placeholder="Default" />
<TextField value="Preenchido" />
<TextField value="Travado" disabled />
<TextField value="Erro" invalid />

Com ícones

leftIcon para affordance (ex: mail, lock). rightIcon para action contextual. Quando invalid, ícone direito vira error automático.

<TextField leftIcon="mail" placeholder="email@itps.org" />
<TextField leftIcon="lock" type="password" rightIcon="visibility" />
<TextField rightIcon="search" placeholder="Buscar paciente" />

Composto com Field

Padrão real de uso: Field envolve TextField. Label, support e error vivem no Field.

Telefone *

Use DDD + número.

<Field id="phone" label="Telefone" mandatory support="Use DDD + número.">
<TextField id="phone" name="phone" type="tel" placeholder="(11) 99999-9999" />
</Field>

Props

Prop	Tipo	Default	Descrição
`id`	`string`	—	ID do `<input>`.
`name`	`string`	—	name HTML para form submit.
`type`	`'text' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'search' \| 'number'`	`'text'`	Tipo nativo do input.
`value`	`string`	—	Valor inicial.
`placeholder`	`string`	`'Placeholder'`	Texto guia.
`disabled`	`boolean`	`false`	Bloqueia interação.
`required`	`boolean`	`false`	Marca como obrigatório no submit.
`invalid`	`boolean`	`false`	Borda vermelha + ícone error.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Altura.
`leftIcon`	`string`	—	Material Symbol antes do input.
`rightIcon`	`string`	—	Material Symbol depois do input.
`class`	`string`	—	Classes adicionais.