Input Field
텍스트를 입력받을 때 써요. 레이블·아이콘·에러 메시지를 조합해요.
Anatomy
- 01Container테두리와 배경으로 입력 영역을 구분해요
- 02Title입력 후에도 필드를 식별할 수 있게 해줘요
- 03Left Icon입력 유형을 아이콘으로 직관적으로 전달해요
- 04Right Icon비밀번호 표시/숨김 전환에만 사용해요
- 05Error Message유효성 실패 시 원인을 텍스트로 안내해요
Properties
Base
Placeholder 만 있는 Simple 형태와 Title 이 함께 있는 Labeled 형태가 기본이에요.
Size
MD(52px)가 기본이고 폼에 써요. SM 은 좁은 곳에 써요. Disabled 는 투명도 35% 예요.
Type
01
Simple (Placeholder only)
검색창·인라인 필터처럼 레이블 자리가 없는 짧은 입력에 써요.
02
Labeled
입력 후에도 어떤 필드인지 알아야 할 때 써요. title 이 위에 남아 맥락을 지켜요.
03
Visible 아이콘
비밀번호에만 써요. 눈 아이콘을 누르면 값이 보이고, 기본은 숨김이에요.
04
사람 아이콘
이메일·아이디처럼 입력 유형을 아이콘으로 알릴 때 써요.
Case
01
Active
필드를 누른 상태예요. 테두리가 파랗게 바뀌고 커서가 떠요.
02
Error
유효성 실패예요. 빨간 테두리만으론 부족하니 무엇이 틀렸는지 Error Message 로 알려요.
03
입력완료 && Focus out
포커스가 빠진 뒤 값이 남은 상태예요. 테두리는 기본색, 값은 유지돼요.
Guidelines
✓ DO
- 레이블은 입력 필드의 목적을 명확히 설명
- 에러 발생 시 구체적인 원인을 Error Message로 안내
- 비밀번호 필드에는 항상 Right Icon(눈 아이콘) 제공
- 이메일/아이디 필드에는 Left Icon으로 입력 유형 표시
✗ DON'T
- Placeholder만으로 레이블 대체 금지 (입력 시 맥락 사라짐)
- 에러 상태에서 에러 메시지 없이 빨간 테두리만 표시 금지
- 불필요한 아이콘 중복 사용 금지
- Disabled 상태에서 에러 상태 혼용 금지
Placeholder vs Labeled
Placeholder only(Simple): 검색창·인라인 필터처럼 레이블 자리가 없는 짧은 입력.
Labeled: 입력 후에도 어떤 필드인지 알아야 하는 폼. title 이 남아 맥락을 지켜요.
Specification
Container
| 속성 | 값 | 설명 |
|---|---|---|
| height | 52px | simple · labeled 공통 |
| border-radius | 8px | |
| border-width | 1px | 모든 상태 공통 |
| padding-x | 20px | 아이콘 없을 때 |
| padding-x (with left icon) | 46px | 좌측 아이콘 존재 시 |
Border Color by State
| State | Token | Raw Value |
|---|---|---|
| Default | --color-line-neutral | #e8ebed |
| Active | --color-accent-normal | #1d7ff9 |
| Error | --color-state-error | #f95c5c |
| Filled | --color-line-neutral | #e8ebed |
| Disabled | --label/disable | opacity 35% |
Typography
| 요소 | Size | Weight | Color Token |
|---|---|---|---|
| Value | 14px | 400 | --color-label-normal (#26282b) |
| Placeholder | 14px | 400 | --color-label-assistive (#9ea4aa) |
| Title Label | 12px | 400 | --color-label-assistive (#9ea4aa) |
| Error Message | 13px | 400 | --color-state-error (#f95c5c) |
Icon
| 속성 | 값 | 설명 |
|---|---|---|
| size | 18×18px | Left / Right 공통 |
| color | --color-label-assistive (#9ea4aa) | 기본 아이콘 색 |
| left icon position | 20px from edge | |
| right icon position | 20px from edge | |
| error icon size | 16×16px | 에러 메시지 앞 아이콘 |
| error message margin-top | 4px | container 하단 간격 |
설치
npm i @polarisoffice/pds-reactBase
Simple(placeholder 만)과 Labeled(title 포함). 폼 입력에는 Labeled 를 권장해요.
import { InputField } from '@polarisoffice/pds-react';
<InputField placeholder="placeholder" />
<InputField label="title" placeholder="placeholder" />Password
비밀번호 필드에는 항상 눈 아이콘(Right Icon)을 제공해요. 기본 상태는 숨김(eye-off).
import { InputField } from '@polarisoffice/pds-react';
<InputField type="password" label="비밀번호" placeholder="비밀번호 입력" />Left Icon
이메일·아이디처럼 입력 유형을 아이콘으로 암시할 때. 좌측 아이콘이 있으면 padding-x 는 46px.
import { InputField } from '@polarisoffice/pds-react';
// 해당 아이콘은 임시 아이콘이라 교체해서 써야 해요.
import { UserIcon } from '@polarisoffice/pds-react';
<InputField leftIcon={<UserIcon />} label="아이디" placeholder="아이디 입력" />Error
빨간 테두리만으론 부족해요. 반드시 Error Message 로 원인을 구체적으로 알려요.
import { InputField } from '@polarisoffice/pds-react';
<InputField
label="이메일"
value="polaris@"
error="이메일 형식이 올바르지 않습니다."
/>Controlled
값과 에러를 바깥에서 관리할 때.
import { InputField } from '@polarisoffice/pds-react';
import { useState } from 'react';
const [email, setEmail] = useState('');
<InputField
label="이메일"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="이메일 입력"
/>