Components · Input

Field

텍스트 입력 + label 한 쌍. .card-inverted 안에 두면 자동으로 dark inverted 스타일 적용.

Preview

Light context

Dark context (auto-inverted)

Usage

<div class="field">
  <label>이메일</label>
  <input value="hong@example.com">
</div>

<!-- Dark context — wrap with .card-inverted -->
<form class="card card-inverted">
  <div class="field">...</div>
</form>

Rules

DO

  • label과 input은 항상 쌍 (placeholder로 대체 금지 — 접근성).
  • input 폰트 ≥ 16px (iOS auto-zoom 방지).

DON'T

  • 테두리 두께·색 임의 변경 금지.