<div>
  <label class="mb-1 block text-caption font-medium text-label-primary">
    Label
  </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
           transition-colors duration-150
           focus:border-outline-active focus:outline-none focus:ring-1 focus:ring-outline-active"
    placeholder="Placeholder tekst"
  />
</div>

<div>
  <label class="mb-1 block text-caption font-medium text-label-primary">
    Label
  </label>
  <input
    type="text"
    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"
    aria-invalid="true"
    aria-describedby="error-msg"
  />
  <p id="error-msg" class="mt-1 text-caption text-label-critical">
    Dit veld is verplicht.
  </p>
</div>

<input
  type="text"
  disabled
  class="w-full rounded-s border border-outline bg-surface-secondary
         px-3 py-2 text-body text-label-tertiary
         cursor-not-allowed"
/>