Field — Sinapse Design System

Nome

Como aparece no documento.

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function ProfileField() {
  return (
    <FieldGroup className="max-w-sm">
      <Field>
        <FieldLabel htmlFor="nome">Nome</FieldLabel>
        <Input id="nome" name="nome" type="text" aria-describedby="nome-help" />
        <FieldDescription id="nome-help">Como aparece no documento.</FieldDescription>
      </Field>
    </FieldGroup>
  );
}

<script setup lang="ts">
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
</script>

<template>
  <FieldGroup class="max-w-sm">
    <Field>
      <FieldLabel for="nome">Nome</FieldLabel>
      <Input id="nome" name="nome" type="text" aria-describedby="nome-help" />
      <FieldDescription id="nome-help">Como aparece no documento.</FieldDescription>
    </Field>
  </FieldGroup>
</template>

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

Instalação

Instale Field e Input da sua stack e rode o comando individual ITpS em seguida. O comando itps add field é 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 field input
pnpm dlx github:ITPS/sinapse-ui-cli add field

terminal · Vue3/Nuxt4

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

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

Uso

Use itps-field para agrupar label, controle e mensagens do campo. Conecte textos de apoio ou erro pelo aria-describedby do controle.

Em React/Next com shadcn/ui e Vue3/Nuxt4 com shadcn-vue, use Field, FieldLabel, FieldDescription, FieldError e o controle da stack. Para HTML ou wrappers finos, mantenha label, controle e mensagens dentro de itps-field.

Exemplos

Obrigatório e validação

Use required no controle para obrigatoriedade. Em erro, marque o controle com aria-invalid="true" e aponte para a mensagem.

Formato inválido.

import {
  Field,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function EmailField() {
  return (
    <FieldGroup className="max-w-sm">
      <Field>
        <FieldLabel htmlFor="email">
          Email <span aria-hidden="true">*</span>
        </FieldLabel>
        <Input
          id="email"
          name="email"
          type="email"
          defaultValue="abc"
          required
          aria-invalid="true"
          aria-describedby="email-error"
        />
        <FieldError id="email-error">Formato inválido.</FieldError>
      </Field>
    </FieldGroup>
  );
}

<script setup lang="ts">
import {
  Field,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
</script>

<template>
  <FieldGroup class="max-w-sm">
    <Field>
      <FieldLabel for="email">
        Email <span aria-hidden="true">*</span>
      </FieldLabel>
      <Input
        id="email"
        name="email"
        type="email"
        value="abc"
        required
        aria-invalid="true"
        aria-describedby="email-error"
      />
      <FieldError id="email-error">Formato inválido.</FieldError>
    </Field>
  </FieldGroup>
</template>

<div class="itps-field">
  <label for="email" class="itps-field__label">
    Email
    <span class="itps-field__required" aria-hidden="true">*</span>
    <span class="itps-field__tooltip" title="Calculada com base nos últimos 12 meses." aria-label="Calculada com base nos últimos 12 meses.">?</span>
  </label>
  <input
    id="email"
    name="email"
    type="email"
    value="abc"
    class="itps-input itps-input--error"
    required
    aria-invalid="true"
    aria-describedby="email-error"
  />
  <p id="email-error" class="itps-field__error">
    <i class="ti ti-alert-circle" aria-hidden="true"></i>
    <span>Formato inválido.</span>
  </p>
</div>

API copy-first

Classe/atributo	Uso
`itps-field`	Agrupa label, controle e mensagens em uma coluna.
`itps-field__label`	Label principal do controle.
`itps-field__required`	Indicador visual de obrigatoriedade; use com `aria-hidden="true"`.
`itps-field__hint`	Texto de apoio conectado por `aria-describedby`.
`itps-field__error`	Mensagem de erro conectada por `aria-describedby`.
`itps-field__tooltip`	Indicador curto de informação complementar ao label.
`for` / `id`	Liga o label ao controle.
`aria-describedby`	Liga o controle ao hint ou erro.
`aria-invalid="true"`	Comunica estado inválido.
`required`	Comunica obrigatoriedade ao navegador e tecnologias assistivas.

Acessibilidade

O label deve apontar para o controle com for/id. Texto de apoio e erro devem ser referenciados por aria-describedby. Em erro, adicione aria-invalid="true" ao controle. Use required no controle; o asterisco é apenas apoio visual.