입력 (Input)

Usage

1import { Input } from "podo-ui/react";2import "podo-ui/styles.css";3
4<Input placeholder="플레이스홀더" />

크기 (size)

텍스트 입력 크기는 사용 화면의 정보 밀도와 중요도에 따라 md(base), lg로 구분해 사용해요. md는 대시보드나 설정처럼 한 화면에 여러 입력이 모이는 일반 폼에, lg는 모바일 메인 폼이나 강조가 필요한 입력에 사용하며, 같은 크기의 버튼과 높이를 맞춰 한 줄에 놓일 때 자연스럽게 정렬돼요.

상태 (state)

텍스트 입력 상태는 입력 단계와 결과에 따라 normal, hover, focused, completed, read-only, danger, disabled로 구분해 표현해요. normal은 입력 전 기본 상태, hover는 마우스를 올려 상호작용 가능함을 미리 알리고, focused는 현재 입력 중임을, completed는 입력이 올바르게 끝났음을, read-only는 값을 보여주되 수정할 수 없음을, danger는 형식 오류나 검증 실패를 알리고, disabled는 지금 입력할 수 없는 상태임을 시각적으로 구분해요. 일관된 상태 체계를 통해 사용자가 입력 과정에서 무엇이 일어나는지 즉각 인지하게 해요.

응용 (composition)

입력값의 성격을 보조하기 위해 prefix, suffix-text, suffix-icon을 조합해 구성해요. prefix는 통화 기호나 아이콘처럼 입력 앞에 맥락을 제시할 때, suffix-text는 단위(원, kg 등)나 도메인처럼 입력 뒤에 고정 정보를 붙일 때, suffix-icon은 지우기·검색·표시 전환 같은 동작을 입력 안에서 제공할 때 사용해요. 목적에 맞게 조합하면 입력의 의미가 분명해지고 불필요한 안내 문구를 줄일 수 있어요.

속성 (props)

podo-ui/react의 Input이 받는 속성이에요. hover·focused는 브라우저 상호작용으로, completed는 값이 채워진 상태로 자연스럽게 표현되고, danger는 invalid 속성으로 켜요. 이 밖에 표준 input 속성(value, placeholder, name, aria-* 등)도 그대로 전달돼요.