FNA Design System

텍스트 필드

라벨은 항상 위에, 단위는 안에, 오류는 아래에 문장으로. 온도·건수 같은 숫자 입력은 자릿수와 단위가 정해진 전용 형태를 씁니다.

℃
기준 75.0℃ 이상

정의

텍스트 필드는 값을 직접 입력받는 요소입니다. 한 줄(input)·여러 줄(textarea)·목록에서 고르기(select)가 있고, 셋 모두 .fna-field(라벨 · 컨트롤 · 힌트 또는 오류) 안에서 씁니다. 시니어 모드에서는 한 화면에 필드 하나씩(.fna-step-field).

언제 쓰고 언제 쓰지 않나

  • 값이 자유롭거나 숫자일 때 쓴다. 선택지가 2~5개면 세그먼트·라디오 카드, 6개 이상이면 select.
  • 날짜·기간은 날짜 선택, 서명은 서명 패드.
  • 읽기 전용 값(자동 수신 온도)은 입력처럼 보이게 하지 않는다 — 텍스트로 보여준다.

해부도

℃
기준 75.0℃ 이상
  1. 라벨12px 700 muted, 항상 위. placeholder 로 대신하지 않는다
  2. 필수 표시error-text 색 별표. 대부분이 필수면 선택 항목에 "(선택)"을 붙이는 편이 낫다
  3. 컨트롤높이 40 · 라운드 8 · 패딩 .5em .85em · 글자 14
  4. 단위 접미℃ · 건 · ppm — 컨트롤 안 오른쪽, muted. 값에 단위를 타이핑하게 하지 않는다
  5. 힌트 / 오류12px. 힌트는 muted, 오류는 error-text 700 + 컨트롤 테두리 error

변형

한 줄 · 여러 줄 · 선택
개선조치와 함께 결재에 첨부됩니다
코드
<div class="fna-form-grid" style="max-width:640px">
    <div class="fna-field"><label class="fna-field__label" for="tf1">업체 코드</label><input class="fna-input" id="tf1" placeholder="관제에서 발급한 코드 (예: HK-0412)"></div>
    <div class="fna-field"><label class="fna-field__label" for="tf2">점검 라인</label><select class="fna-select" id="tf2"><option>1라인</option><option>2라인</option><option>3라인</option></select></div>
    <div class="fna-field" style="grid-column:1/-1"><label class="fna-field__label" for="tf3">이탈(부적합) 사유</label><textarea class="fna-textarea" id="tf3" placeholder="예: 냉동고 문 열림 12분, 성에 제거 후 복귀"></textarea><span class="fna-field__hint">개선조치와 함께 결재에 첨부됩니다</span></div>
  </div>
크기 — sm 32 (표 안) · md 40 · lg 48
코드
<div style="display:flex;flex-direction:column;gap:12px;max-width:320px"><input class="fna-input fna-input--sm" value="sm 32" aria-label="sm"><input class="fna-input" value="md 40" aria-label="md"><input class="fna-input fna-input--lg" value="lg 48" aria-label="lg"></div>
숫자 입력 — inputmode, 자릿수, 단위
℃
소수 1자리
/ 3
코드
<div class="fna-form-grid" style="max-width:480px">
    <div class="fna-field"><label class="fna-field__label" for="n1">중심온도</label><div style="position:relative"><input class="fna-input" id="n1" inputmode="decimal" pattern="-?[0-9]+(\.[0-9])?" value="75.2" style="padding-right:2.4em;font-variant-numeric:tabular-nums"><span style="position:absolute;right:.85em;top:50%;transform:translateY(-50%);color:var(--fna-text-muted);font-size:13px">℃</span></div><span class="fna-field__hint">소수 1자리</span></div>
    <div class="fna-field"><label class="fna-field__label" for="n2">시편 통과 수</label><div style="position:relative"><input class="fna-input" id="n2" inputmode="numeric" value="3" style="padding-right:2.4em;font-variant-numeric:tabular-nums"><span style="position:absolute;right:.85em;top:50%;transform:translateY(-50%);color:var(--fna-text-muted);font-size:13px">/ 3</span></div></div>
  </div>
시니어 — 한 화면 한 필드 (.fna-step-field)
2 / 3 단계
코드
<div class="fna-step-field" style="max-width:360px"><label class="fna-field__label" for="sf1">중심온도를 입력하세요</label><input class="fna-input" id="sf1" inputmode="decimal" value="75.2" style="font-variant-numeric:tabular-nums"><span class="fna-step-field__count">2 / 3 단계</span></div>

상태

기본
호버
포커스
채움
오류
기준 75.0℃ 이상이어야 합니다
비활성
읽기 전용

치수

항목smmdlg시니어 step
높이3240 (큰글씨 48)4864
글자12141524
패딩.3em .6em.5em .85em.5em .85em.5em .85em
테두리1112
라운드8888
라벨–컨트롤 간격4448
필드 사이(grid gap)121212—
textarea 최소 높이80 (2 × 40), 세로 리사이즈만

Do · Don't

℃
기준 75.0℃ 이상
Do 라벨 위, 단위 안, 힌트 아래
Don't placeholder 가 라벨 · 단위를 타이핑값을 넣는 순간 무엇을 묻는지 사라진다
형식이 다릅니다. 'HK-0412'처럼 하이픈을 넣으세요
Do 오류는 어디가 왜 틀렸는지 + 고치는 법
잘못된 입력입니다
Don't 빨간 테두리만 · '잘못된 입력'

접근성

  • <label for> 로 연결. 라벨 없는 입력은 aria-label.
  • 오류: aria-invalid="true" + aria-describedby 로 오류 문장 연결. 제출 시 첫 오류 필드로 포커스 이동.
  • 포커스 링은 컨트롤 안쪽(offset −1) 2px primary — 테두리와 겹쳐 두께 3px 로 보인다.
  • placeholder 대비 3.5:1(#8b94ad) — 정보는 힌트에, placeholder 는 예시만.
  • 숫자는 inputmode="decimal|numeric" 로 현장 폰 키패드를 바로 띄운다. type="number" 의 스피너는 쓰지 않는다.
  • 자동 완성 가능한 것은 autocomplete(username, current-password, one-time-code).

문구

부분규칙예
라벨명사, 2~8자, 단위는 라벨에 넣지 않는다중심온도 · 반려 사유 · 업체 코드
placeholder"예: " 로 시작하는 실제 예시 또는 비움예: HK-0412
힌트기준·형식·다음에 일어날 일기준 75.0℃ 이상 · 결재에 첨부됩니다
오류무엇이 + 왜 + 어떻게. 사과·느낌표 없음기준 75.0℃ 이상이어야 합니다 · 비밀번호는 8자 이상입니다

코드

<div class="fna-field">
  <label class="fna-field__label" for="temp">중심온도 <span class="req">*</span></label>
  <input class="fna-input" id="temp" inputmode="decimal" aria-describedby="temp-hint">
  <span class="fna-field__hint" id="temp-hint">기준 75.0℃ 이상</span>
</div>
<!-- 오류 -->
<input class="fna-input" aria-invalid="true" aria-describedby="temp-err">
<span class="fna-field__error" id="temp-err">기준 75.0℃ 이상이어야 합니다</span>
<!-- 폼 그리드 · 시니어 단일 필드 -->
<div class="fna-form-grid">…</div>   <div class="fna-step-field">…</div>

안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 components.css .fna-input · .fna-textarea · .fna-select · .fna-fieldComponents · FNA 디자인 시스템 v1.0