Roosevelt Docs
Roosevelt Docs
Welkom
Architecture
Workflows
Infrastructure
AI & Automation
API Reference
Design System
Design System

Foundations

Design TokensTypographyColorsSpacingMotion

Components

ComponentsButtonCardBadgeInputNavigation

Patterns

LayoutFormsFeedback

Guidelines

AccessibilityDark ModeFigma Handoff
Guides
Design System

Forms

Form patronen met input, label en validatie states

Forms

Form patronen combineren Input componenten met labels, help tekst en error states.

Basis Form Group

<div class="space-y-4">
  <div>
    <label class="mb-1 block text-caption font-medium text-label-primary">
      Naam
    </label>
    <input
      type="text"
      class="w-full rounded-s border border-outline-strong bg-surface-primary
             px-3 py-2 text-body text-label-primary
             placeholder:text-label-tertiary
             focus:border-outline-active focus:outline-none focus:ring-1 focus:ring-outline-active"
      placeholder="Je naam"
    />
  </div>
 
  <div>
    <label class="mb-1 block text-caption font-medium text-label-primary">
      Email
    </label>
    <input
      type="email"
      class="w-full rounded-s border border-outline-strong bg-surface-primary
             px-3 py-2 text-body text-label-primary
             placeholder:text-label-tertiary
             focus:border-outline-active focus:outline-none focus:ring-1 focus:ring-outline-active"
      placeholder="je@email.nl"
    />
  </div>
</div>

Error State Pattern

<div>
  <label class="mb-1 block text-caption font-medium text-label-primary">
    Email
  </label>
  <input
    type="email"
    aria-invalid="true"
    aria-describedby="email-error"
    class="w-full rounded-s border border-label-critical bg-surface-primary
           px-3 py-2 text-body text-label-primary
           focus:outline-none focus:ring-1 focus:ring-label-critical"
  />
  <p id="email-error" class="mt-1 text-caption text-label-critical">
    Voer een geldig e-mailadres in.
  </p>
</div>

Token Gebruik

ElementToken
Labeltext-caption, text-label-primary, font-medium
Input border (default)border-outline-strong
Input border (focus)border-outline-active + ring-outline-active
Input border (error)border-label-critical + ring-label-critical
Error messagetext-caption, text-label-critical
Placeholdertext-label-tertiary
✦

Validatie

Toon errors pas na blur of form submit — niet tijdens typen. Gebruik aria-invalid en aria-describedby voor screen readers.

Previous

Layout

Next

Feedback

On this page

FormsBasis Form GroupError State PatternToken Gebruik