REIS IA
REIS IA FORMULÁRIOS DESIGN SYSTEM v1.0

Formulários

Form inputs use Surface-3 backgrounds with 8% white-alpha borders. On focus, the border shifts to accent blue with a 15% opacity glow ring. Validation states use the signal color system: red for errors, green for success.

[01] Demo Interativo

Click, type, tab through, and blur the inputs below to see every state in action. The form includes real-time validation — try submitting with empty fields.

Input States
Standard text input
Border brightens on hover
Blue border + glow ring on focus
Please enter a valid email
Email verified
Non-interactive state
Input Types
Interactive Form — Try It
[02] Estados do Input

Every input state rendered side-by-side. Height is 48px for comfortable tap targets. Font size is 16px to prevent mobile zoom on iOS.

Default
Hover
Focus
Error Invalid email format
Success Verified
Disabled
Height
48px
Padding
12px 16px
Font size
16px (prevents iOS zoom)
Background
var(--surface-3) (#161616)
Border
1px solid var(--border-default)
Border radius
8px
Placeholder
var(--text-quaternary) (35% white)
Focus border
var(--accent-blue) (#4A90FF)
Focus glow
0 0 0 3px rgba(74, 144, 255, 0.15)
Text Input CSS
.input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-3);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  transition: border-color 200ms var(--ease-base),
              box-shadow 200ms var(--ease-base);
  outline: none;
}

.input::placeholder {
  color: var(--text-quaternary);
}

/* Hover */
.input:hover:not(:focus):not(:disabled):not(.input-error) {
  border-color: var(--border-visible);
}

/* Focus */
.input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(74, 144, 255, 0.15);
}

/* Error */
.input-error, .input.is-error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Success */
.input-success, .input.is-success {
  border-color: var(--color-success);
}

/* Disabled */
.input:disabled {
  background: var(--surface-2);
  border-color: var(--border-subtle);
  color: var(--text-quaternary);
  cursor: not-allowed;
  opacity: 0.7;
}
[03] Textarea e Select

Textarea

Multi-line text input. Inherits all base input styles. Height is auto with min-height 120px. Vertical resize only.

Textarea CSS
/* Textarea variant */
.input-textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
}

Select

Custom-styled select dropdown. Uses appearance: none with an SVG chevron. Same focus and error states as text input.

Select CSS
/* Select variant */
.input-select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,...");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}
[04] Labels, Helpers e Erros

Every input needs a label. Helper text below the input provides context. Error text replaces helper text when validation fails. Error messages are announced via aria-describedby for screen readers.

This helps the field below
Invalid email format
Verified
Labels & Helper Text CSS
/* Field label */
.input-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* Helper text */
.input-helper {
  display: block;
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 6px;
}

/* Error text */
.input-error-text {
  display: block;
  font-size: 13px;
  color: var(--color-error);
  margin-top: 6px;
}
[05] Input Glass-Morphism

A translucent input variant for use on glass card or modal backgrounds. Uses a lower-opacity background with subtle backdrop blur.

Newsletter Signup

Glass Input CSS
/* Glass-morphism input */
.input-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
}

.input-glass:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(74, 144, 255, 0.15);
}
[06] Padrões de Layout de Formulário

Two layout patterns: stacked (default, single column, max-width 600px) and inline (grid-based, fields side by side on desktop). Stacked is preferred for conversion forms to reduce cognitive load.

Form Layout Patterns
<!-- Stacked layout (default) -->
<form class="flex flex-col gap-5 max-w-[600px]">
  <div>
    <label class="input-label">Name</label>
    <input class="input" type="text" />
  </div>
  <div>
    <label class="input-label">Email</label>
    <input class="input" type="email" />
    <span class="input-helper">We will never share your email.</span>
  </div>
  <button class="btn-primary" type="submit">Submit</button>
</form>
[07] Regras de Uso
Do
  • Use 16px font size to prevent iOS auto-zoom on focus
  • Always pair inputs with labels (visible, not placeholder-only)
  • Show validation errors on blur, not on every keystroke
  • Use aria-describedby to link error messages to inputs
  • Keep conversion forms stacked and max-width 600px
Don't
  • Use placeholder text as the only label — always show a visible label
  • Validate on every keystroke — wait for blur or submit
  • Use custom dropdown components when a native select works
  • Remove the focus glow ring — it provides essential visibility
  • Mix glass-morphism inputs with standard inputs in the same form
See Also
PatternsSemantic Tokens