Textarea
A labelled multi-line field with an optional character counter (Figma "Textarea" 2056:52098): backoffice reason dialogs, "Não é risco", cancel feedback.
A whole field on its own (label, box, hint, counter, error), built on base-ui Field: do not wrap it in a Form Field.
<Textarea label="Motivo" required maxLength={200} showCounter hint="Fica registrado na auditoria." value={reason} onValueChange={setReason} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Textarea
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 |
|---|---|---|---|---|---|---|
Fica registrado na auditoria. | Fica registrado na auditoria. | Fica registrado na auditoria. | Fica registrado na auditoria. | Fica registrado na auditoria. | Escreva o motivo (mínimo 10 caracteres). | Fica registrado na auditoria. |
Size · touch
| Default | Hover | Focus | Filled | Disabled | Error | Read-only |
|---|---|---|---|---|---|---|
Fica registrado na auditoria. | Fica registrado na auditoria. | Fica registrado na auditoria. | Fica registrado na auditoria. | Fica registrado na auditoria. | Escreva o motivo (mínimo 10 caracteres). | Fica registrado na auditoria. |
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 |
|---|---|---|---|
| label? | ReactNode | — | The visible label (Figma "Label", e.g. "Motivo"). Without it, pass `aria-label`. |
| required? | boolean | false | |
| hint? | ReactNode | — | Help line under the box (Figma "hint"). |
| error? | ReactNode | — | Validation message: red border, `aria-invalid`, the message read with the box. |
| invalid? | boolean | — | |
| value? | string | — | |
| defaultValue? | string | "" | |
| onValueChange? | ((value: string) => void) | — | |
| maxLength? | number | — | Hard limit, also shown by the counter ("80/200"). |
| showCounter? | boolean | true | Figma "showCounter" (needs `maxLength`). |
| size? | "md" | "touch" | "md" | md = 40-row type (desktop, backoffice), touch = phone. |
| placeholder? | string | — | |
| name? | string | — | |
| rows? | number | — | |
| readOnly? | boolean | — | |
| disabled? | boolean | — | |
| autoFocus? | boolean | — | |
| id? | string | — | |
| className? | string | — |
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.
SearchInput
The search field (Figma "Search Input" 2056:52176): magnifier, the query, then the ⌘K hint while empty or a clear button once filled (Esc clears too).