Formulário

Field

/componentes/field.mdmarkdown cru, para quem lê com agent em vez de olho

Básico

Empresa

Razão social como consta no CNPJ

Com erro

Informe um email válido

Tamanhos

Pequeno

Médio

Grande

Desabilitado

CNPJ

Não pode ser alterado depois do cadastro

Importar

import { Field } from '@rivocode/ui'

Quando usar

Raiz do campo de formulário. Liga rótulo, ajuda e erro por acessibilidade.

Compõe com FieldLabel, Input, FieldDescription e FieldError. A ligacao e automática: não escreva htmlFor nem aria-describedby a mao.

Marque inválido com invalid na raiz e mostre a mensagem com <FieldError match>. disabled na raiz desabilita o conjunto.

No React Native

Traduz: o @rivocode/ui-native exporta Field - label, description e error como props; o erro vence a descrição, como no web, e o texto que chega depois entra por fade. A API não é a mesma do web (no nativo tudo é controlado), e a tabela de paridade diz o que muda peça a peça.

API

Prop	Tipo
`actionsRef`0.4.0 A ref to imperative actions.	`RefObject<FieldRootActions \| null>`
`dirty`0.4.0 Whether the field's value has been changed from its initial value.	`boolean`
`disabled`0.4.0 Whether the component should ignore user interaction.	`boolean`
`invalid`0.4.0 Whether the field is invalid.	`boolean`
`name`0.4.0 Identifies the field when a form is submitted.	`string`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, FieldRootState>ReactElement<unknown, stringJSXElementConstructor<any>>`
`touched`0.4.0 Whether the field has been touched.	`boolean`
`validate`0.4.0 A function for custom validation.	`((value: unknown, formValues: Record<string, any>) => stringstring[]Promise<stringstring[]null>null)`
`validationDebounceTime`0.4.0 How long to wait between `validate` callbacks if `validationMode="onChange"` is used.	`number`
`validationMode`0.4.0 Determines when the field should be validated.	`FormValidationMode`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

Partes

Field se monta com estas peças. Todas vivem nesta página, porque separar cada uma num endereço obrigaria a abrir seis abas para montar uma tela.

FieldDescription

/field-description.md

A ajuda abaixo do campo: formato esperado, para que serve, o que vai acontecer.

Entra no aria-describedby do controle, então é lida junto com o campo em vez de ficar invisível para quem usa leitor de tela.

Prop	Tipo
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, FieldDescriptionState>ReactElement<unknown, stringJSXElementConstructor<any>>`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

FieldError

/field-error.md

A mensagem de erro do campo.

Só aparece quando o campo está inválido, e marca aria-invalid no controle junto. Vermelho sozinho não diz nada a quem não distingue a cor, a frase é que diz.

Prop	Tipo
`match`0.4.0 Determines whether to show the error message according to the field's [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).	`boolean \| keyof ValidityState`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, FieldErrorState>ReactElement<unknown, stringJSXElementConstructor<any>>`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

FieldLabel

/field-label.md

O rótulo do campo.

Dentro de um Field, a Base UI liga rótulo e controle sozinha, sem htmlFor escrito à mão e sem id inventado. Clicar no rótulo foca o campo.

Prop	Tipo
`nativeLabel`0.4.0 Whether the component renders a native `<label>` element when replacing it via the `render` prop.	`boolean`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, FieldLabelState>ReactElement<unknown, stringJSXElementConstructor<any>>`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

Quando usar

Raiz do campo de formulário. Liga rótulo, ajuda e erro por acessibilidade.

Compõe com FieldLabel, Input, FieldDescription e FieldError. A ligacao e automática: não escreva htmlFor nem aria-describedby a mao.

Marque inválido com invalid na raiz e mostre a mensagem com <FieldError match>. disabled na raiz desabilita o conjunto.

No React Native

API

Prop	Tipo
`actionsRef`0.4.0 A ref to imperative actions.	`RefObject<FieldRootActions \| null>`
`dirty`0.4.0 Whether the field's value has been changed from its initial value.	`boolean`
`disabled`0.4.0 Whether the component should ignore user interaction.	`boolean`
`invalid`0.4.0 Whether the field is invalid.	`boolean`
`name`0.4.0 Identifies the field when a form is submitted.	`string`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, FieldRootState>ReactElement<unknown, stringJSXElementConstructor<any>>`
`touched`0.4.0 Whether the field has been touched.	`boolean`
`validate`0.4.0 A function for custom validation.	`((value: unknown, formValues: Record<string, any>) => stringstring[]Promise<stringstring[]null>null)`
`validationDebounceTime`0.4.0 How long to wait between `validate` callbacks if `validationMode="onChange"` is used.	`number`
`validationMode`0.4.0 Determines when the field should be validated.	`FormValidationMode`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

Partes

Field se monta com estas peças. Todas vivem nesta página, porque separar cada uma num endereço obrigaria a abrir seis abas para montar uma tela.

FieldDescription

/field-description.md

A ajuda abaixo do campo: formato esperado, para que serve, o que vai acontecer.

Entra no aria-describedby do controle, então é lida junto com o campo em vez de ficar invisível para quem usa leitor de tela.

Prop	Tipo
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, FieldDescriptionState>ReactElement<unknown, stringJSXElementConstructor<any>>`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

FieldError

/field-error.md

A mensagem de erro do campo.

Só aparece quando o campo está inválido, e marca aria-invalid no controle junto. Vermelho sozinho não diz nada a quem não distingue a cor, a frase é que diz.

Prop	Tipo
`match`0.4.0 Determines whether to show the error message according to the field's [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).	`boolean \| keyof ValidityState`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, FieldErrorState>ReactElement<unknown, stringJSXElementConstructor<any>>`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.

FieldLabel

/field-label.md

O rótulo do campo.

Dentro de um Field, a Base UI liga rótulo e controle sozinha, sem htmlFor escrito à mão e sem id inventado. Clicar no rótulo foca o campo.

Prop	Tipo
`nativeLabel`0.4.0 Whether the component renders a native `<label>` element when replacing it via the `render` prop.	`boolean`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, FieldLabelState>ReactElement<unknown, stringJSXElementConstructor<any>>`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.