Field — Sinapse Design System

Anatomia básica

Label + input + support text. Use sempre que o input precisar de contexto.

Nome

Como aparece no documento.

<Field id="nome" label="Nome" support="Como aparece no documento.">
<TextField id="nome" name="nome" />
</Field>

<template>
<div class="itps-field">
  <label for="nome" class="itps-field__label">Nome</label>
  <input id="nome" name="nome" type="text" class="itps-input" />
  <p class="itps-field__hint">Como aparece no documento.</p>
</div>
</template>

<div className="itps-field">
<label htmlFor="nome" className="itps-field__label">Nome</label>
<input id="nome" name="nome" type="text" className="itps-input" />
<p className="itps-field__hint">Como aparece no documento.</p>
</div>

<div class="itps-field">
<label for="nome" class="itps-field__label">Nome</label>
<input id="nome" name="nome" type="text" class="itps-input" />
<p class="itps-field__hint">Como aparece no documento.</p>
</div>

Mandatory

Marca campo obrigatório com asterisco no label.

CPF *

<Field id="cpf" label="CPF" mandatory>
<TextField id="cpf" name="cpf" />
</Field>

Erro

Quando error é passado, mensagem substitui support. Input filho recebe invalid para borda vermelha.

error Formato inválido.

<Field id="email" label="Email" error="Formato inválido.">
<TextField id="email" name="email" value="abc" invalid />
</Field>

tooltip adiciona ícone info no label.

Taxa anual ?

<Field id="taxa" label="Taxa anual" tooltip="Calculada com base nos últimos 12 meses.">
<TextField id="taxa" name="taxa" rightIcon="percent" />
</Field>

Props

Prop	Tipo	Default	Descrição
`id`	`string`	—	ID do input filho. Usado pelo label.
`label`	`string`	—	Texto do label. Sem label = só wrapper.
`mandatory`	`boolean`	`false`	Asterisco indicando obrigatório.
`tooltip`	`string`	—	Adiciona ícone info no label.
`support`	`string`	—	Texto auxiliar. Suprimido se `error`.
`error`	`string`	—	Mensagem de erro. Substitui `support`.
`class`	`string`	—	Classes adicionais.

Anatomia básica

Mandatory

Erro

Com tooltip

Props