Input

텍스트·숫자·날짜 등 단일 행 입력을 위한 Input 컴포넌트입니다. form_field · input_field · input_group · input_split · input_otp를 조합해 레이블, 힌트, 애드온, 분할·인증 입력을 구성합니다.

기본

레이블과 힌트 텍스트가 포함된 폼 필드입니다.

이름

2~20자 이내로 입력해 주세요.

단독 사용

form_field 래퍼 없이 input_field로 레이블과 input을 묶을 수 있습니다. 접근 가능한 이름은 반드시 지정합니다. 보이는 레이블이 있으면 label.form_field-label + htmlFor를, 아이콘만 있는 검색창·툴바 등에는 label.input_group으로 input을 감싸고 input_group-label_hidden으로 이름을 제공합니다.

검색어

닉네임

코드

아이콘만 있는 툴바 검색은 label.input_group으로 input을 감싸고, 화면에 보이지 않는 input_group-label_hidden으로 접근 가능한 이름을 지정합니다.

입력 타입

HTML input type에 따라 브라우저 기본 UI가 적용됩니다. class="input"은 모든 타입에 공통으로 사용합니다.

텍스트

비밀번호

이메일

전화번호

URL

검색

숫자

0~100 사이 정수

날짜

시간

입력 종류

결제·본인인증·사업자 정보 등 도메인별 입력 패턴입니다. 예시는 부모 너비 100%를 기본으로 하며, 필요 시 form_field_fit · input_fit으로 최대 너비를 제한할 수 있습니다. input_split · input_otp · input_group · input_row를 조합해 구성합니다.

카드번호

뒤 8자리는 마스킹 처리할 수 있습니다.

유효기간

CVC

카드 뒷면 3자리

인증번호 (OTP)

문자 메시지로 받은 6자리 번호를 입력하세요.

휴대폰 번호

+82

휴대폰 인증번호

인증번호가 오지 않으면 재요청해 주세요.

주민등록번호

뒷자리는 보안을 위해 마스킹합니다.

사업자등록번호

계좌번호

우편번호

결제 금액

원

천 단위 구분은 표시용으로 별도 포맷팅합니다.

크기

input_sm · input(기본) · input_lg로 padding·font-size를 조절합니다. 너비와는 별개이며 input_fit 등과 자유롭게 조합할 수 있습니다.

Small

Medium

Large

너비

크기와 독립적으로 너비를 제어합니다. 기본은 부모 100%, input_fit · input_field_fit · form_field_fit · form_fit으로 --input-max-width(320px)까지 제한합니다.

전체 너비 — Small

전체 너비 — Medium

전체 너비 — Large

제한 너비 — Small

제한 너비 — Medium

제한 너비 — Large

input_field_fit — Small

input_field_fit — Medium

input_field_fit — Large

Input Group

input_group으로 앞뒤에 텍스트·아이콘 애드온을 붙일 수 있습니다.

원

KRW

필수 필드

required 속성과 form_field-required로 필수 입력을 표시합니다.

이메일

업무용 이메일을 입력해 주세요.

이름

상태

disabled · readonly · is-error · is-success로 입력 상태를 표현합니다. 오류·성공 메시지는 색상만으로 전달하지 않고 텍스트와 aria 속성을 함께 사용합니다.

기본

비활성

disabled 속성으로 편집을 막습니다.

에러

올바른 이메일 형식이 아닙니다.

입력 삭제

input_clearable 래퍼로 값이 있을 때 우측에 지우기 버튼을 표시합니다. readonly · disabled 상태에서는 버튼이 나타나지 않습니다.

텍스트

검색

읽기 전용 (삭제 버튼 없음)

조합 예시

유효성 검사 후 성공·실패 상태를 조합한 로그인 폼입니다. aria-invalid · aria-describedby · role="alert" · role="status"로 스크린 리더에 피드백을 전달합니다.

API · Props

Prop	타입	기본값	설명
`ref`	React.Ref<HTMLInputElement>	—	실제 input DOM 참조 (prefix · suffix 사용 시에도 input을 가리킴)
`value`	string	—	제어 컴포넌트 값 (Vue model-value 대응)
`defaultValue`	string	''	비제어 초기 값
`type`	string	text	input type 속성
`size`	'sm' \| 'md' \| 'lg'	md	input_sm · input_lg
`placeholder`	string	—	placeholder 속성
`disabled`	boolean	false	비활성
`error`	boolean	false	오류 상태 (is-error, aria-invalid)
`block`	boolean	false	부모 너비 100% (input_block)
`className`	string	—	input 또는 input_group 루트에 추가 클래스
`onChange`	(event) => void	—	값 변경 콜백 (Vue update:modelValue 대응)

선언되지 않은 HTML 속성·이벤트(id,autoComplete, onBlur 등)는 루트 input 요소에 그대로 전달됩니다.

API · Children

Children	설명
`prefix`	앞쪽 애드온 (Vue #prefix → input_group-addon)
`suffix`	뒤쪽 애드온 (Vue #suffix → input_group-addon)

API · Events

이벤트	설명
`onChange`	입력 값 변경 시 (Vue update:modelValue 대응). React change 이벤트를 전달합니다.
`onPaste`	붙여넣기 시. data-input-split · data-input-otp 내부에서는 값을 각 칸에 분배합니다.
`onKeyDown`	키 입력 시. 분할 입력의 Backspace 이동과 OTP 좌우 방향키 이동을 지원합니다.

클래스 · 속성

React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`input`	텍스트 입력 루트
`input_sm · input_lg · input_block`	크기·너비
`input_masked`	마스킹 입력값 표시 시 자동 적용 (type="password" + 값 있음)
`input_group · input_group-addon`	애드온 묶음
`input_clearable · input_clear`	지우기 버튼 — input_clear에 data-ripple="surface"
`is-error · is-disabled`	상태
`data-ripple`	클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용
`data-ripple="false"`	해당 요소 ripple 비활성
`data-no-ripple`	하위 전체 ripple 비활성

디자인 토큰

토큰	기본값	설명
`--input-max-width`	320px	데모·폼 최대 너비
`--input-clear-size · --input-clear-offset`	—	클리어 버튼
`--input-font-masked · --input-masked-letter-spacing`	—	마스킹 입력