File input
파일 입력(file input)는 하나 이상의 디바이스의 로컬 파일을 선택하고 첨부하는데 사용하는 입력 컴포넌트입니다.
Anatomy
- Label(선택)
- Value(or Placeholder)
- File reset Button : 업로드한 파일 reset 버튼, 파일을 업로드 했을때 표출
- File Upload Button
- Container : 입력 상태에 따라 border, bg color 변경
- Helper text(선택) : text 입력에 참고할 text 입력
State
Text upload 상태는 Default / Complete / Error / Disable 5가지로 사용합니다.
File Upload
Default
Complete
Error
Disable
Size
사이즈는 높이를 기준으로 sm / md / lg 3가지를 사용합니다.
lg (40px)
md (36px)
sm (30px)
사용 가이드
여러 건의 파일 업로드
2개 이상의 파일을 업로드했을 때는 value에 몇건의 파일을 업로드했는지 표출합니다.
Do
Don’t