EmailInput
The welcome e-mail pill (Figma "Email Input" 169:314): one large field with the submit arrow inside.
It completes the domain as you type (Tab or → accepts the ghost), offers the probable address when the domain looks misspelled ("gmial.com"), and shows the API's verdict below. No native validation bubbles; the field stays type="text" so completion can place the caret.
<EmailInput aria-label="E-mail" submitLabel="Continuar" value={email} onValueChange={setEmail}
status={status} message={message} onSubmit={send} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Email Input
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).
| Empty | Focus | Valid | Suggestion | Error | Wrong domain | Pending |
|---|---|---|---|---|---|---|
Você quis dizer | Falta o domínio depois do @. | Esse domínio não recebe e-mails. Confira o que vem depois do @. |
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 |
|---|---|---|---|
| value? | string | — | |
| defaultValue? | string | "" | |
| onValueChange? | ((value: string) => void) | — | |
| status? | EmailInputStatus | "idle" | What the screen knows about the address (Figma `State`): Valid shows a check, Suggestion offers `suggestion`, Error and Wrong domain show `message` as an error, Pending shows the spinner on the button. Empty and Focus are interaction. |
| suggestion? | string | null | — | The corrected address offered in Suggestion. Defaults to `suggestEmailFix(value)`. |
| onSuggestionAccept? | ((email: string) => void) | — | Called after the person accepts the suggestion (the value already changed). |
| message? | ReactNode | — | The line under the pill: the error text, or the lead-in of the suggestion ("Você quis dizer"). |
| submitLabel | string | — | Accessible name of the submit arrow, e.g. "Continuar". |
| onSubmit? | ((email: string) => void) | — | Called on Enter and on the arrow. Without it the arrow submits the form. |
| name? | string | — | |
| placeholder? | string | — | |
| autoFocus? | boolean | — | |
| disabled? | boolean | false | |
| className? | string | — |
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`).
PhoneInput
One field for the whole international number, dial code included (Figma "Phone Input" 185:1196).