Components

Text Input & Textarea

한 줄 입력과 여러 줄 입력입니다. focus 시 파랑 테두리만 바뀝니다.

코드 보기
<input class="tn-input" placeholder="…">
<textarea class="tn-input" style="min-height:72px"></textarea>

Variants

이름설명미리보기
기본1px border → focus 파랑
errorborder var(--err) + Callout 병행
disabledopacity .5

Guidelines

✓ Do
  • placeholder는 "예: 값" 또는 용도 설명 한 줄
  • textarea는 resize:none + 충분한 기본 높이
✕ Don't
  • focus에 그림자·글로우 금지 (테두리 색만)
  • 인라인 유효성 문구를 input 안에 넣지 않는다

Specification

속성토큰/값비고
radius7px
focusvar(--primary)
errorvar(--err)