FieldError
The message under a control (Figma "Field Error" 2022:2476): an icon plus text, so the state is never colour alone.
Tone Error is the validation message; tone Hint is the neutral help line in the same slot. Point the control at it with aria-describedby={id} (Form Field, Radio Group and Textarea do it for you).
<FieldError id="cpf-erro">CPF inválido: confira os 11 dígitos.</FieldError>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Field Error
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).
Tone · Error
| Field Error |
|---|
CPF inválido: confira os 11 dígitos. |
Tone · Hint
| Field Error |
|---|
CPF inválido: confira os 11 dígitos. |
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 |
|---|---|---|---|
| tone? | "error" | "hint" | null | "error" | |
| className? | string | — | |
| children | ReactNode | — | The message (Figma "Message"). Say what is wrong and how to fix it. |
HelpHint
A small "?" after a label that opens a short explanation of why we ask (Figma "Help Hint" 170:208).
Input
The DS text input (Figma "Input" 169:221): a base-ui Input inside the field box, so it plugs into Form Field (label, hint, error) and into plain forms (`name`, `ref`, react-hook-form `register`).