MSDR Design System

Formulários

Field é a unidade de composição: label, controle, descrição e erro ficam associados sem markup manual. React Hook Form + Zod cuidam de estado e validação.

Anatomia do Field

Layout de formulário sempre usa Field e FieldGroup — nunca div com espaçamento manual.

Aparece para outras pessoas do workspace.

Controles de texto

Input
Input — disabled e inválido
Textarea
InputGroup
msdr.app/

Seleção

Select
NativeSelect
Checkbox
RadioGroup
Frequência
Switch
Slider

InputOTP

Usado na tela de verificação.

Erros ficam ao lado do campo, com data-invalid no Field e aria-invalid no controle — o que conecta mensagem e campo para leitores de tela. Formulários completos e com submit assíncrono estão em Composições → Patterns.