PhoneInput
One field for the whole international number, dial code included (Figma "Phone Input" 185:1196).
Focus fills "+55 "; replacing it with "+1" switches country, and the flag follows (Brazil, or a globe when unknown). A pasted number never doubles the dial code. inputmode="tel", autocomplete="tel".
<PhoneInput aria-label="Celular" value={phone} onValueChange={setPhone} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Phone 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).
Country · Brazil
| Placeholder | Filled | Error | Hover | Focus | Disabled |
|---|---|---|---|---|---|
Country · Unknown
| Placeholder | Filled | Error | Hover | Focus | Disabled |
|---|---|---|---|---|---|
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 | — | International text as typed, e.g. "+55 11 98765-4321". Use `phoneToE164()` before sending it to the API. |
| defaultValue? | string | "" | |
| onValueChange? | ((value: string) => void) | — | |
| size? | FieldBoxSize | "48" | |
| invalid? | boolean | — | |
| className? | string | — | |
| required? | boolean | — | |
| onFocus? | ((event: BaseUIEvent<React.FocusEvent<HTMLInputElement, Element>>) => void) | — | |
| onBlur? | ((event: BaseUIEvent<React.FocusEvent<HTMLInputElement, Element>>) => void) | — | |
| onPaste? | ((event: BaseUIEvent<ClipboardEvent<HTMLInputElement>>) => void) | — |
EmailInput
The welcome e-mail pill (Figma "Email Input" 169:314): one large field with the submit arrow inside.
OtpInput
The sign-in code (Figma "OTP Input" 170:184): ONE real `autocomplete="one-time-code"` numeric input (SMS and e-mail autofill, paste, password managers, native forms) drawn as segmented slots.