Inputs
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`).
Fills its container.
<Input size="48" placeholder="Nome completo" value={name} onValueChange={setName} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Input
string
string
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 · 44
| Placeholder | Filled | Focus | Error | Disabled | Suggestion | Hover | Read-only |
|---|---|---|---|---|---|---|---|
Size · 48
| Placeholder | Filled | Focus | Error | Disabled | Suggestion | Hover | Read-only |
|---|---|---|---|---|---|---|---|
Size · Default
| Placeholder | Filled | Focus | Error | Disabled | Suggestion | Hover | Read-only |
|---|---|---|---|---|---|---|---|
Size · 40
| Placeholder | Filled | Focus | Error | Disabled | Suggestion | Hover | 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 |
|---|---|---|---|
| size? | FieldBoxSize | "48" | Box height in px; "default" is the 32 px compact size. |
| leadingIcon? | ReactNode | — | Figma "Leading icon" (a lucide element), decorative: say it in the label. |
| trailingIcon? | ReactNode | — | Figma "Trailing icon", decorative (a calendar glyph, the CEP spinner). |
| invalid? | boolean | — | Error look + `aria-invalid`. Inside a Form Field, pass `error` there instead. |
| completion? | string | — | Figma `State=Suggestion`: the ghost text drawn after the typed value (e.g. the rest of an e-mail domain). Drawn after `value` (or the initial `defaultValue`), so keep the input controlled while it shows. Accepting it is the caller's job (Email Input does it on Tab and →). |
| className? | string | — | Classes for the box (width goes here: the box fills its container). |
| required? | boolean | — |