FormField
A labelled field (Figma "Form Field" 185:1351): Label, one control, then a hint or an error.
Built on base-ui Field, so the label is linked to the control, and the hint and error reach it through aria-describedby. The Figma Type axis (Text, CPF, Date, Relationship, Phone) is the control you put inside, not a prop.
<FormField label="CPF" required error={errors.cpf}>
<Input size="48" inputMode="numeric" {...register("cpf")} />
</FormField>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Form Field
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Type · Text
| Default | Error |
|---|---|
Escreva o nome como está no documento. |
Type · CPF
| Default | Error |
|---|---|
CPF inválido: confira os 11 dígitos. |
Type · Date
| Default | Error |
|---|---|
Essa data deixa a Marlene com mais de 120 anos. Confira o ano. |
Type · Relationship
| Default | Error |
|---|---|
Type · Phone
| Default | Error |
|---|---|
Confira o número: faltam dígitos depois do DDD. |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label | ReactNode | — | The visible label (never a placeholder instead). |
| children | ReactNode | — | One control: Input, Phone Input, Date Input, Select, Textarea… |
| required? | boolean | false | Red asterisk on the label and `required` on the control. |
| optional? | ReactNode | — | The muted word after the label, e.g. "opcional". |
| help? | ReactNode | — | A Help Hint after the label. |
| hint? | ReactNode | — | Help line under the control (Field Error tone Hint), read with the control. |
| error? | ReactNode | — | Validation message. Its presence makes the field invalid: red border, `aria-invalid`, and the message (icon + text) read with the control. |
| invalid? | boolean | — | Invalid without a message of its own (the message lives elsewhere). |
| disabled? | boolean | — | |
| name? | string | — | Form name of the control (base-ui Field: wins over the control's own). |
| className? | string | — |