Navegar componentes

FieldStatus

FieldExemplo

FieldStatus renderiza feedback de validação para fields e controles similares a fields. Use diretamente para controles customizados que precisam da mesma apresentação de error, warning ou success que Field.

Importação

import {FieldStatus} from '@pharos-ds/core/FieldStatus';

Exemplos

Área interativa

type

variant

Este campo é obrigatório.

Código

import {FieldStatus} from '@pharos-ds/core/Field';

<FieldStatus
  message="Este campo é obrigatório."
  type="error"
  variant="attached"
 />

Boas práticas

Faça: Use status attached abaixo de inputs com borda quando a mensagem pertence àquele input.
Faça: Use status detached para controles como checkboxes, switches e controles customizados onde overlap seria visualmente estranho.
Evite: Use FieldStatus para alertas gerais ou avisos em nível de página; use Banner ou Toast em vez disso.

Props

Prop	Tipo	Padrão	Descrição
`type` *	`'error' \| 'warning' \| 'success'`	—	Tipo de status.
`message` *	`string`	—	Texto da mensagem de status.
`id`	`string`	—	ID para associação aria-describedby.
`variant`	`'attached' \| 'detached'`	`'attached'`	Variante visual: attached sobrepõe o input, detached flutua abaixo.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/FieldStatus