Inputs
DateInput
A day you type (masked dd/mm/aaaa, numeric keyboard) or pick from the Calendar in a popover (Figma "Date Input" 2056:52278).
The value is ISO; with name, a hidden input submits it in native forms.
<DateInput value={birth} onValueChange={setBirth} min="1910-01-01" max="2026-10-19" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Date Input
string
boolean
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).
Size · md
| Default | Hover | Focus | Filled | Disabled | Error | Read-only |
|---|---|---|---|---|---|---|
Size · touch
| Default | Hover | Focus | Filled | Disabled | Error | Read-only |
|---|---|---|---|---|---|---|
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 | — | The day as ISO ("2012-03-12"), or "" while incomplete or not a real day. |
| defaultValue? | string | "" | |
| onValueChange? | ((value: string) => void) | — | |
| min? | string | — | Earliest and latest days (ISO) the calendar offers. Typed dates outside still reach `onValueChange`: say why in the Form Field error. |
| max? | string | — | |
| size? | "md" | "touch" | "touch" | md = 40 (desktop), touch = 48 (phone). |
| invalid? | boolean | — | |
| showCalendar? | boolean | true | Figma "showCalendar": the calendar button at the end. |
| calendarLabel? | string | "Abrir calendário" | Accessible name of the calendar button. |
| initialMonth? | string | — | Month the calendar opens on when nothing is picked (ISO day). |
| className? | string | — | |
| name? | string | — | |
| placeholder? | string | "dd/mm/aaaa" | |
| readOnly? | boolean | — | |
| disabled? | boolean | — | |
| required? | boolean | — |